文章/答案/技术大牛

发布

社区首页 >问答首页 >多级下拉菜单项目

问多级下拉菜单项目
EN

Stack Overflow用户

提问于 2017-06-01 00:59:07

回答 1查看 1.8K关注 0票数 0

如何更新此代码以在焦点丢失时隐藏菜单项。做出选择并再次单击教程按钮后，所有菜单项仍处于打开状态。

请试一试。

工作示例：https://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

<!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    .dropdown-submenu {
        position: relative;
    }
    
    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
    </style>
    </head>
    <body>
       
    <div class="container">
      <h2>Multi-Level Dropdowns</h2>
      <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
      <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">HTML</a></li>
          <li><a tabindex="-1" href="#">CSS</a></li>
          <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
              <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
              <li class="dropdown-submenu">
                <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">3rd level dropdown</a></li>
                  <li><a href="#">3rd level dropdown</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    
    
    <script>
    $(document).ready(function(){
      $('.dropdown-submenu a.test').on("click", function(e){
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });
    </script>
    
    </body>
    </html>

jquery

css

multi-level

回答 1

Stack Overflow用户

发布于 2017-06-01 01:38:45

你可以把切换分成两个不同的函数来显示和隐藏ul，然后你可以在hide函数中添加代码来隐藏所有的孩子ul。

像这样的东西可能会对你有所帮助：

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){

    if ( $(this).next('ul').is(":visible") ) {
      $(this).children().hide();
    } else {
      $(this).next('ul').show();
    }

    e.stopPropagation();
    e.preventDefault();
  });
});

注意:我还没有测试过这个，所以我的代码可能包含错误，我只想告诉你我在想什么。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44290685

复制

相似问题

问多级下拉菜单项目
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多级下拉菜单项目EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多级下拉菜单项目
EN