Question

我创建了一个带有一些下拉菜单的导航栏。我想要一些嵌套的下拉列表。由于bootstrap3不支持嵌套下拉列表，我手动创建它。在宽屏幕中显示菜单项，没关系，但在移动设备大小的菜单隐藏在切换按钮中，它无法正常工作。如何在移动尺寸中解决这个问题？

HTML：

<nav class="navbar navbar-default">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-to-min" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand" id="brand-name"></div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-to-min">
                <ul class="nav navbar-nav">
                    <li><a href="#">خانه</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">دانش‌آموزان<span class="caret"></span></a>
                      <ul class="dropdown-menu">
                          <li><a href="#">مقطع اول</a></li>
                          <li><a href="#">مقطع دوم</a></li>
                          <li><a href="#">مقطع سوم</a></li>
                          <li><a href="#">مقطع چهارم</a></li>
                          <li><a href="#">مقطع پنجم</a></li>
                      </ul>
                  </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">کارکنان<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">مدیریت</a></li>
                            <li class="dropdown"><a href="#" class="dropdown-toggle dropdown-nested" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" tabindex="-1">معاونین<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">معاون اول</a></li>
                                    <li><a href="#">معاون پرورشی</a></li>
                                </ul>
                            </li>
                            <li><a href="#">معلمان</a></li>
                            <li><a href="#">خدمات</a></li>
                        </ul>
                    </li>
                    <li><a href="#">تماس با ما</a></li>
                    <li href="#"><a>همکاری با ما</a></li>
                </ul>
            </div>
         </nav>

CSS：

.dropdown:focus > .dropdown-menu, .dropdown:active > .dropdown-menu{
    display: block;
}
.dropdown-menu > .dropdown > .dropdown-menu{
    top: 0;
    right: 100%;
    margin-top: -6px;
    margin-right: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
@media (min-width: 768px) {
    .dropdown-menu > li > .dropdown-nested:after {
        display: block;
        content: " ";
        float: left;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 5px 5px 0;
        border-right-color: #ccc;
        margin-top: 5px;
        margin-left: -10px;
    }
    .dropdown > .dropdown-nested > .caret{
        display: none;
    }
    .dropdown:hover > .dropdown-menu{
        display: block;
    }
    .open > .dropdown-menu{
        display: none;
    }
    .navbar-default .navbar-nav > li > a:active {
        color: #777;
    }
    .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
        color: #777;
        background-color: #f8f8f8;
    }
}

此外，我的网页方向为rtl。

JSFiddle

Answer 1

从W3学校，他们有一个如何做嵌套下拉引导模式的例子。 https://www.w3schools.com/bootstrap/bootstrap_ref_js_dropdown.asp

＆＃13;

$(document).ready(function(){
  $('.dropdown a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

＆＃13;

<!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>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we use jQuery to open multi-level dropdowns 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>
        <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>
            <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>

</body>
</html>

＆＃13;

Bootstrap-多级下拉列表

1 个答案: