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來測試，但它可能是你在找什麼。