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

导航的jQuery导航冲突

2 个答案: