Проблема с выпадающими подменю в jquery

Я делаю выпадающие подменю с помощью jquery, но когда я наводю курсор на любую из основных ссылок навигации, все подменю выпадают. Я считаю, что мне нужно что-то сделать с this(), но я не могу понять синтаксис правильно. Вот скрипка http://jsfiddle.net/xzN5G/

Вот мой HTML

<nav id="nav">
    <ul class="nav">
        <li class="mainli"><a href="" class="selected">Home</a>
            <ul class="submenu">
                <li>s1111111</li>
                <li>a2222222</li>
                <li>g3333333</li>
                <li>y4444444</li>
            </ul>
        </li>    
        <li class="mainli"><a href="album.html">My Photos</a>
            <ul class="submenu">
                <li>11111111</li>
                <li>22222222</li>
                <li>33333333</li>
                <li>44444444</li>
            </ul>
        </li>
        <li class="mainli"><a href="travel.html">My Travel</a>
            <ul class="submenu">
                <li>aaaaaaaaaa</li>
                <li>bbbbbbbbbb</li>
                <li>cccccccccc</li>
                <li>dddddddddd</li>
            </ul>
        </li>
        <li class="mainli"><a href="aboutwork.html">About Work</a>
            <ul class="submenu">
                <li>rgre1111</li>
                <li>estg22</li>
                <li>thser3333</li>
                <li>rtyr4444</li>
            </ul>
        </li>
        <li class="mainli"><a href="portfolio.html">My Portfolio</a>
            <ul class="submenu">
                <li>qqqqqqqq</li>
                <li>tttttttt</li>
                <li>ppppppppp</li>
                <li>yyyyyyyyyy</li>
            </ul>
        </li>
        <li class="mainli"><a href="contact.html">Contact Me</a>
            <ul class="submenu">
                <li>99999999</li>
                <li>88888888</li>
                <li>77777777</li>
                <li>66666666</li>
            </ul>
        </li>
    </ul>
</nav>

и мой jquery

$(document).ready(function(){
    $(".mainli").hover(function() {
        $(".submenu").slideDown("medium");
    }, function () {
        $(".submenu").slideUp("medium");
    })
});

jquery
person Esser    schedule 21.01.2014    source источник
comment
По умолчанию они должны быть расширены?   -  person Rahil Wazir    schedule 22.01.2014
comment
Вы могли бы уйти с this здесь. `$ (this) .slideDown (средний);   -  person Dudo    schedule 22.01.2014
comment
Вы в курсе, что ховер мертв? Ни один из ваших мобильных пользователей не сможет использовать это меню.   -  person isherwood    schedule 22.01.2014
comment
@cpburnz Спасибо за приведение в порядок моего кода, но это мне не очень помогает. :)   -  person Esser    schedule 22.01.2014
comment
@Rahil Wazir, когда я нахожу на один, он должен расширяться   -  person Esser    schedule 22.01.2014
comment
@Mallanaga, это не сработает!   -  person Rahil Wazir    schedule 22.01.2014
comment
ой? см. ниже, пожалуйста.   -  person Dudo    schedule 22.01.2014

Ответы (5)


arrow_upward
1
arrow_downward

Вам нужно найти .submenu внутри $(this), метод find() сделает это за вас. children() также будет работать в вашем случае, если .submenu является прямым потомком this(). find() с другой стороны, поиск по всем потомкам (детям, внукам и т. Д.)

Согласно Что такое самые быстрые дочерние элементы () или find () в jQuery? нет большой разницы в скорости между обеими функциями

$(document).ready(function () {
    // $(".submenu").slideUp("medium");
    $(".mainli").hover(function () {
        $(this).find(".submenu").slideDown("medium");
    },

    function () {
        $(this).find(".submenu").slideUp("medium");
    });
});

Я попробовал это на вашей скрипке, и это сработало, вы можете раскомментировать эту строку $(".submenu").slideUp("medium");, чтобы все меню начинали закрываться.

person Mohamed Khamis    schedule 21.01.2014
comment
Я не думаю, что было бы идеально скрывать .submenu с помощью такого JS. Это может вызвать мигание видимого меню во время загрузки страницы. - person zakangelle; 22.01.2014
comment
Спасибо. Если вы добавите скрипку, она всегда будет оценена больше. - person Esser; 22.01.2014

arrow_upward
1
arrow_downward

Используйте метод .find() и установите для .submenu значение display: none, чтобы сначала он был скрыт:

$(document).ready(function() {
  $(".mainli").hover(function() {
    $(this).find(".submenu").slideDown("medium");
  },
  function() {
    $(this).find(".submenu").slideUp("medium");
  }
  );
});

См. ДЕМО.

person zakangelle    schedule 21.01.2014
comment
Является ли find предпочтительнее children в этом контексте? Я сказал children в своем ответе, но find может быть более эффективным или лучше обрабатывать определенные случаи. - person akousmata; 22.01.2014

arrow_upward
1
arrow_downward

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

$(document).ready(function(){
    $('.submenu').slideUp();
    $(".mainli").hover(function() {
        $(this).children('.submenu').slideDown("medium");
    },
    function () {
        $(this).children('.submenu').slideUp("medium");
    });
});

http://jsfiddle.net/VAYxh/4/

person akousmata    schedule 21.01.2014
comment
Еще один вопрос. Поскольку у меня есть контент под меню, как мне заставить этот контент игнорировать выпадающие подменю? - person Esser; 22.01.2014

arrow_upward
0
arrow_downward

http://jsfiddle.net/xzN5G/4/

$(".submenu", this)

Это должно сделать это за вас. Кроме того, в вашем CSS вам необходимо иметь .submenu { display: none; }

person Dudo    schedule 21.01.2014
comment
Ваш комментарий содержит другой синтаксис, чем ваш ответ, прочитанный выше :) - person Rahil Wazir; 22.01.2014
comment
Предоставленный. Я использую комментарии, чтобы заставить OP задуматься. Я использую ответы, чтобы решить проблему. - person Dudo; 22.01.2014
comment
Я ответил на ваш комментарий: (о? См. Ниже, пожалуйста.) - person Rahil Wazir; 22.01.2014

arrow_upward
0
arrow_downward

Я бы лично скрывал подменю по умолчанию, а затем проверял, скрыты ли они при наведении, если они скрыты, то сдвиньте их вниз, иначе просто используйте скрыть.

См. Эту скрипку.

Обновлен JS.

$(document).ready(function () {
    $(".mainli").hover(function () {
        var target = $(this).find('.submenu');
        if (target.is(':hidden')) {
            target.slideDown("medium");
        } else {
            target.hide();
        }
    });
});

Добавлен CSS

ul.submenu {
    float: right;
    display:none;
    overflow:hidden;
}
person Kyle Needham    schedule 21.01.2014