JQuery раскрывающаяся навигация с событием клика - PullRequest
Новая
       13

JQuery раскрывающаяся навигация с событием клика

3 голосов
/ 05 декабря 2011

Мне нужно создать простое (2 уровня) выпадающее меню с помощью jQuery.Есть много решений для выпадающих меню в сети, но все они работают с парящим событием.Чтобы быть уверенным, что он будет работать в iPhone, я хочу использовать вместо щелчка мышку, и у меня возникли проблемы.

HTML: 

<ul class="nav nav-top" id="nav">
<li><a href="#">Menu Item 1</a></li>
<li>
    <a href="#">Menu Item 2</a>
    <ul class="nav">
        <li><a href="#">Submenu Item 1</a></li>
        <li><a href="#">Submenu Item 2</a></li>
        <li><a href="#">Submenu Item 3</a></li>
    </ul>   
</li>
<li>
    <a href="#">Menu Item 3</a>
    <ul class="nav">
        <li><a href="#">Submenu Item 1</a></li>
        <li><a href="#">Submenu Item 2</a></li>
        <li><a href="#">Submenu Item 3</a></li>
    </ul>
</li>
<li>
    <a href="#">Menu Item 4</a>
</li>

jQuery: 

$(document).ready(function() {
$(".nav-top > li:has(ul)").toggle(function(e) {
    e.preventDefault();
    $(this).find('ul').show();
    $(this).addClass("expanded"); //This class set display:block to UL
},
function(e) {
    e.preventDefault();
    $(this).find('ul').hide();
    $(this).removeClass("expanded");
});

$(".nav-top > li:has(ul) ul").mouseup(function() {
    return false
});
$(document).mouseup(function(e) {
    if($(e.target).parent(".nav-top > li a").length==0) {
        $(".nav-top > li:has(ul)").removeClass("expanded");
        $(".nav-top > li:has(ul) ul").hide();
    }
});

});

Не работает правильно.Если нажать «Пункт меню 2», то в некоторых случаях вместо меню, а затем снова «Пункт меню 2» не будет отображаться выпадающий список (см. Пример: http://test.xhtml4u.ru/go/test.html), я думаю, что причина в функции .toggle, но сделатьНе знаю, как это исправить.

Спасибо за любую помощь.

1 Ответ

1 голос
/ 05 декабря 2011

ДЕМО jsBin

Код: 

$(document).ready(function(){
  $(".nav-top > li").click(function(e) {
    if($(this).has('ul')){
      $('.expanded').removeClass('expanded').hide();
    }
    $(this).find('ul').addClass('expanded').show();
  });

  $('.nav-top a').click(function(e){
    e.preventDefault();
  });
});
...