javascript - 导航的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 items = $('.catLevel').find('li');
items.click(function() {
  var clicked = $(this).find('.navWrap');
  clicked.show();
  items.find('.navWrap').not(clicked).hide();
});

我没有可用的 DOM 进行测试，但它可能是您正在寻找的。

Answer 2

你要做的就是把它们全部隐藏起来，然后只显示被点击的那个。你可能想稍微调整一下，但这样的东西应该可以工作：

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);
});