Question

我问过关于使用纯css here关闭下拉列表的问题，有些人说我不可能找到其他方式我在js上阅读并且我现在正在使用js进行编码但是我有一个代码问题，它没有正常运行它显示所有下拉菜单并销毁子菜单..任何教程都赞赏或任何建议这里是我为这个问题做的小提琴here

这是js

$(function () {
      $('.click-nav > ul').toggleClass('no-js js');
      $('.click-nav .js ul').hide();
      $('.click-nav .js').click(function(e) {
        $('.click-nav .js ul').slideToggle(200);
        $('.clicker').toggleClass('active');
        e.stopPropagation();
      });
      $(document).click(function() {
        if ($('.click-nav .js ul').is(':visible')) {
          $('.click-nav .js ul', this).slideUp();
          $('.clicker').removeClass('active');
        }
      });
    });

Answer 1

Updated Fiddle

您必须添加以下功能：

    $(function () {
  $('.click-nav .no-js .have-second-level-menu').click(function(e) {
     $(this).closest('li').find('.sub-menu').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });

  $('.have-third-level-menu').click(function(e) {
      $(this).closest('li').find('ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
});

Html将如下：

<div id="headermenu" class="click-nav">
<ul class="no-js">
    <li id=""><a href="#">menu1</a></li>
    <li id=""><a class="have-second-level-menu" href="#">menu2</a>
        <ul class="sub-menu">
            <li ><a class="have-third-level-menu" href="#">submenu1</a>
                <ul>
                    <li><a href="#">submenu.1</a></li>
                    <li><a href="#">submenu.2</a></li>
                    <li><a href="#">submenu.3</a></li>
                    <li><a href="#">submenu.4</a></li>
                </ul>
            </li>
            <li><a href="#">submenu4</a></li>
            <li><a href="#">submenu5</a></li>
            <li><a href="#">submenu7</a></li>
        </ul>
    </li>           
</ul>   
</div>

在onclick事件上使用js关闭下拉菜单

1 个答案: