JQuery найти помощь Div - PullRequest
Новая
       27

JQuery найти помощь Div

0 голосов
/ 21 марта 2011

В настоящее время я создаю строку меню, состоящую из значков, которые показывают контекстное подменю при наведении курсора.По сути, при наведении курсора на значок появляется всплывающее меню / всплывающая подсказка (с дополнительными параметрами), но сам значок также должен быть интерактивным.

До сих пор я использовал следующую конструкцию HTML и jQuery для каждого элемента меню.: 

<div id="profile" class="menu-item">
    <div id="profile-tip" class="tip">
        **insert profile menu options**
    </div>
</div>

<div id="search" class="menu-item">
    <div id="search-tip" class="tip">
        **insert search menu options**
    </div>
</div>

и 

$(".menu-item").hover(function() {
    $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $(this).find("div").hide();
});
});

Что я хочу сделать, это изменить HTML-код следующим образом (чтобы я мог применить ссылку onClick к разделу «анкеты»):

<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
    <div id="profile-tip" class="tip">
        **insert menu options**
    </div>

Однако я не знаю, как изменить jQuery, чтобы найти соответствующий div для отображения при наведении курсора.Связанный div всплывающей подсказки / всплывающего меню всегда будет xxxx-tip (где xxx - имя родительского div).

В качестве примера я представляю, что это будет выглядеть примерно так (имейте в виду, я знаю оченьнемного о jQuery, поэтому я хорошо знаю, что это будет выглядеть глупо): 

$(".menu-item").hover(function() {
    $.find("div").attr('id'+"-tip").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $.find("div").attr('id'+"-tip").hide();
});
});

Подводя итог: мне нужно изменить jQuery, чтобы показать div на основе идентификатора родительского div + строку "-tip"

Надеюсь, это не слишком смущает.Любая помощь очень ценится:)

Ответы [ 3 ]

0 голосов
/ 21 марта 2011

Я не уверен на 100% о цели здесь, но вы можете получить свой div по ID, как показано здесь: 

$(".menu-item").hover(function()
{
    $(this).find(".tip").fadeIn("fast").show();
});

Или в CSS: 

.menu-item .tip
{
    display: none;
}

.menu-item .tip:hover,
.menu-item:hover .tip
{
    display: auto;
}
0 голосов
/ 21 марта 2011

Вместо того, чтобы находить имя div в PARENT того, над чем вы зависли, используйте jQuery, чтобы найти подсказку, которая является РЕБЕНКОМ того, над чем вы зависли ... вместо этого ищите DOMUP.

Использовать оператор jQuery $ (this) ... 

$('.menu-item').hover(function(){
     $(this).find('.tip).fadeIn();


},
function() {
    $(this).find('.tip).fadeOut();
});
0 голосов
/ 21 марта 2011

Не уверен, что я полностью понимаю, что вы хотите, но, возможно, попробуйте что-то более похожее на это: 

$(".menu-item").hover(
    function() {
        $(this).find(".tip").fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $(this).find(".tip").hide();
    }
);

Редактировать : Если элемент tip не является дочерним по отношению к элементу div меню, это может работать: 

$(".menu-item").hover(
    function() {
        $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $('#' + this.id + '-tip').hide();
    }
);
...