2013-05-20 2 views
0

У меня есть это маленькое меню вещи я работаю: http://jsfiddle.net/6a3eZ/25/Jquery «тумблер» требует два клика

Проблема лежит с «MISC» и меню «MISC2», которые скользят открытым. Когда кто-то открывается, другой должен закрываться, а код «переключить», который я вставил ниже, отлично работает для первых двух кликов, но тогда для пунктов меню потребуется не один, а два щелчка, чтобы активировать снова. Какие-нибудь подсказки, как сохранить его одним щелчком мыши?

По какой-то причине на сенсорных устройствах меню также не могут быть закрыты.

Код работает повсеместно с «зависанием», но его действительно нужно активировать нажатием кнопки.

Вот что у меня есть:

function mainmenu(){ 

    $('.menu ul').css({display: "none"}); 

    $('.menu li.sub').toggle(function(){ 
     $(this).siblings('li').find('ul').slideUp(200); 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(200); 
    },function(){ 
     $(this).find('ul:first').slideUp(200); 
    }); 

    $('.sub-menu li a').click(function(e) { 
     e.stopPropagation(); 
    }); 

}; 

$(document).ready(function(){     
    mainmenu(); 
}); 
+0

Эта версия 'тумблер()' осуждался в 1.7 , и удалены в 1.9 – adeneo

+0

Oh .. Любые предложения обходных решений? – Ray

ответ

1

проверялось, но попробовать что-то больше, как это:

$(document).ready(function(){     
    $('.menu ul').hide(); 

    $('.menu li.sub').click(function() { 
     $(this).find('ul:first').slideToggle(200) 
       .end().siblings('li').find('ul').slideUp(200); 
    }); 
}); 
+0

Это, похоже, отлично работает. Выбрано как ответ из-за простоты. Большое спасибо. – Ray

2

Попробуйте это. Должен работать нормально: http://jsfiddle.net/Ptz9F/

Я бы сказал, использовать некоторые классы и указать шаги в правильном направлении :)

Только мой JQuery:

$(document).ready(function(){     
    $('.menu ul.sub-menu').css({display: "none"}); 
    $('.menu li.sub > a').click(function(e){ 
     var $this = $(this), 
      $parent = $this.parent('li'), 
      $sub = $('.sub-menu', $parent); 

     if (!$sub.hasClass('slided-down')) 
     { 
      // this sub is not visible 
      $('.sub-menu.slided-down').slideUp(200).removeClass('slided-down'); 
      $sub.slideDown(200).addClass('slided-down'); 
     } 
     else 
     { 
      // this sub is visible 
      $sub.slideUp(200).removeClass('slided-down'); 
     } 

     e.preventDefault(); 
     return false; 
    }); 
}); 
+0

Работает красиво, спасибо. – Ray

+0

Я проголосовал за ваше решение, но выбрал другое в качестве ответа из-за простоты решения. Soz :(Для тех, у кого есть аналогичная проблема, оба решения работают отлично. – Ray

Смежные вопросы