Question

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

我有以下问题我正在尝试使用子菜单创建菜单。

菜单应该：

点击后打开子菜单。（工作）
子菜单在所选菜单上保持打开状态。（工作）

第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

希望这会对你有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

添加此行$(".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 3

正如Flame已经提到过，你要做的就是点击（隐藏）所有内容点击

添加

编辑你的剪辑

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

点击事件后的

（采用底层菜单类，在里面找到每个无序列表并隐藏它）

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

单击关闭所有其他子菜单

3 个答案: