jQuery导航冲突的导航

Question

我想做一个可点击的导航栏。它的工作原理并不在于：悬停，但我不确定如何循环并打开用户在关闭之前点击过的选项卡。目前它在相同的li上工作，显示和隐藏，但它在另一个选项卡上发生冲突。任何帮助都会很棒。

var $main_menu = $('.catLevel'); 

$main_menu.find('li').click(function(event) { 

    var clicker = $(this).data('clicker'); 

    if (clicker) { 
     //Odd number of clicks 
     console.log('Clicker .hide'); 

     $(this).find('.navWrap').hide(); 

    } else { 
     //Even number of clicks 
     console.log('Clicker .show'); 

     $(this).find('.navWrap').show(); 

    } 
    $(this).data("clicker", !clicker); 
}); 

Answer 1

你想要做的就是隐藏它们，然后只显示被点击的那个。你可能想调整这一点，但这样的事情应该工作：

var $main_menu = $('.catLevel'), 
    $menu_kids = $main_menu.find('li'); 

$menu_kids.on("click", function(e) { 
    e.preventDefault(); 
    var $this = $(this), 
     clicker = $(this).data('clicker'); 

    $menu_kids.hide(); //This hides all of them 

    $this.show(); //Only show the one that was clicked. You should select the DIV with the content instead of $this. 

    $this.data("clicker", !clicker); 
}); 

Answer 2

所以这样的事情？

var items = $('.catLevel').find('li'); 
items.click(function() { 
    var clicked = $(this).find('.navWrap'); 
    clicked.show(); 
    items.find('.navWrap').not(clicked).hide(); 
}); 

我没有工作DOM来测试，但它可能是你在找什么。