单击关闭所有其他子菜单

Question

大家好， 感谢您抽出宝贵时间查看这篇文章。

我尝试创建带有子菜单的菜单时遇到以下问题。

菜单应该：

1. 点击打开子菜单。 （工作）

2. 子菜单在所选菜单上保持打开状态。 （工作）

   3.在其他菜单中单击后，前一个子菜单应关闭。 （不工作）

HTML

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <ul class="bottom-menu">
      <li class="drop"><a>Hyperlink 1</a></li>
      <li class="drop"><a>Hyperlink 2</a>
      <ul id="m1" class="bottom-menu-sub">
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
      </ul>
    </li>
    <li class="drop"><a>Hyperlink 3</a>
      <ul id="m2">
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
      </ul>
    </li>
    <li class="drop"><a>Hyperlink 4</a>
      <ul id="m3">
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
      </ul>
    </li>
</ul>

CSS：

      .bottom-menu li ul {
      display:none;
      }

JS：

jQuery(function ($) {
    // jQuery code in here can safely use $
    $('.bottom-menu li')
        .css({
        cursor: "pointer"
    });

    $(".drop>a").on('click', function (eventData) {
        var $listItem = $(this).closest('li');

        $listItem.find('ul').toggle();
        $listItem.toggleClass('open');

        $.cookie('open_items', 'the_value');
        openItems = new Array();
        $("li.drop").each(function (index, item) {
            if ($(item).hasClass('open')) {
                openItems.push(index);
            }
        });
        $.cookie('open_items', openItems.join(','));
    });

    if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
        previouslyOpenItems = $.cookie('open_items');
        openItemIndexes = previouslyOpenItems.split(',');
        $(openItemIndexes).each(function (index, item) {
            $("li.drop").eq(item).addClass('open').find('ul').toggle();
        });
    }
});

jsFiddle

Answer 1

添加此行$(".bottom-menu li").removeClass('open');

添加这个css

.bottom-menu li ul {
    display:none;
}
.bottom-menu li.open ul{
  display:block;
}




jQuery(function ($) {
        // jQuery code in here can safely use $
        $('.bottom-menu li')
            .css({
            cursor: "pointer"
        });

        $(".drop>a").on('click', function (eventData) {
        $(".bottom-menu li").removeClass('open');// Add This Line
            var $listItem = $(this).closest('li');


            $listItem.toggleClass('open');

            $.cookie('open_items', 'the_value');
            openItems = new Array();
            $("li.drop").each(function (index, item) {
                if ($(item).hasClass('open')) {
                    openItems.push(index);
                }
            });
            $.cookie('open_items', openItems.join(','));
        });

        if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
            previouslyOpenItems = $.cookie('open_items');
            openItemIndexes = previouslyOpenItems.split(',');
            $(openItemIndexes).each(function (index, item) {
                $("li.drop").eq(item).addClass('open');
            });
        }
    });

https://jsfiddle.net/rb2wxurL/2/

Answer 2

正如 Flame 已经提到的，您要做的是在单击时关闭（隐藏）所有内容

通过添加编辑您的剪辑

            $('.bottom-menu ul').each(function() { 
                $(this).hide();
            });

在您的点击事件之后（采用底部菜单类，在其中找到每个无序列表并将其隐藏）

https://codepen.io/anon/pen/WXZaNe

Answer 3

希望对你有所帮助。

jQuery(function ($) {
    // jQuery code in here can safely use $

    $(".drop>a").on('click', function (eventData) {
        var $listItem = $(this).closest('li');
				$('.drop ul').hide();
        $listItem.find('ul').toggle();
        $listItem.toggleClass('open');
        
        //$.cookie('open_items', 'the_value');
        openItems = new Array();
        $("li.drop").each(function (index, item) {
            if ($(item).hasClass('open')) {
                openItems.push(index);
            }
        });
        //$.cookie('open_items', openItems.join(','));
    });

    //if ($.cookie('open_items') && $.cookie('open_items').length > 0) {
    //    previouslyOpenItems = $.cookie('open_items');
    //    openItemIndexes = previouslyOpenItems.split(',');
    //    $(openItemIndexes).each(function (index, item) {
    //        $("li.drop").eq(item).addClass('open').find('ul').toggle();
    //   });
    //}
});

.bottom-menu li ul {
    display:none;
}
.bottom-menu li{
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="bottom-menu">
    <li class="drop"><a>Hyperlink 1</a></li>
    <li class="drop"><a>Hyperlink 2</a>
      <ul id="m1" class="bottom-menu-sub">
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
      </ul>
    </li>
    <li class="drop"><a>Hyperlink 3</a>
      <ul id="m2">
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
      </ul>
    </li>
    <li class="drop"><a>Hyperlink 4</a>
      <ul id="m3">
        <li><a href="#">Hyperlink Sub</a></li>
        <li><a href="#">Hyperlink Sub</a></li>
      </ul>
    </li>
</ul>


<p>If you open the "Hyperlink 2", the sub menu will show (that's as entended),</br> Althought once you click "Hyperlink 3" the sub-menus of "Hyperlink 2" stay open.
</p>