Question

我试过这个，除了二级子菜单外一切正常当我选择其他项目的子菜单时，它不会自动关闭例如，当我选择page1-3然后选择page1-4时 1-3的项目仍然保留在页面中，直到我再次点击它们

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>


    @media only screen and (min-width: 500px) {
    nav{float:right;
    }
    li{
     float:right !important;
     text-align:right;
     direction:rtl ;
    }
    .dropdown-menu{
    right:0 !important;
    }
                                              }
       nav{text-align:right; }
       li{text-align:right; direction:rtl;}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    margin-right: 100%;
    margin-top: -1px;
}
</style>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-3<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>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-4<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">4rd level dropdown</a></li>
              <li><a href="#">4rd level dropdown</a></li>
            </ul>
            </li>

          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

  <script>

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

</script>

</body>
</html>

Answer 1

您可以做的是首先点击子菜单隐藏子菜单中的所有菜单，而不是toggle ul在下面的代码段中找到更多内容

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>


    @media only screen and (min-width: 500px) {
    nav{float:right;
    }
    li{
     float:right !important;
     text-align:right;
     direction:rtl ;
    }
    .dropdown-menu{
    right:0 !important;
    }
                                              }
       nav{text-align:right; }
       li{text-align:right; direction:rtl;}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    margin-right: 100%;
    margin-top: -1px;
}
</style>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-3<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>

            <li class="dropdown-submenu">
            <a class="test" href="#">Page 1-4<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">4rd level dropdown</a></li>
              <li><a href="#">4rd level dropdown</a></li>
            </ul>
            </li>

          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>

    </div>
  </div>
</nav>

  <script>

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(".dropdown-submenu .dropdown-menu").css("display","none");
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

</script>

</body>
</html>

Answer 2

将此添加到您的脚本中：

$('.dropdown-submenu > ul').hide();

解决的代码是：

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

如何通过单击其他项目自动关闭子菜单？

2 个答案: