Question

我正在尝试使用Bootstrap 3和Jquery构建垂直边栏，此边栏将具有多个下拉子菜单。当我单击一个子菜单（在此示例中为选项2.4）时，我想显示第二个下拉子菜单，但是如您所见，主菜单（选项2）关闭。我给你看一个例子：

$('.dropdown-submenu > a').click(function() {
  $(this).parent().children('.dropdown-menu').toggleClass('shown');
});

.sidebar-nav .dropdown-menu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
}

.sidebar-nav .dropdown-submenu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
}

.shown {
  display: block;
}

.dropdown-submenu .dropdown-menu {
  background: #CCC;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<ul class="nav sidebar-nav">
  <li>
    <a href="#">Option 1</a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Option 2 <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Option 2.1.</a></li>
      <li><a href="#">Option 2.2.</a></li>
      <li><a href="#">Option 2.3.</a></li>
      <li class="dropdown-submenu">
        <a href="#">Option 2.4. <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Option 2.4.1</a></li>
          <li><a href="#">Option 2.4.2</a></li>
          <li><a href="#">Option 2.4.3</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="#">Option 2.5. <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Option 2.4.1</a></li>
          <li><a href="#">Option 2.4.2</a></li>
          <li><a href="#">Option 2.4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Option 3</a>
  </li>
  <li>
    <a href="#">Option 4</a>
  </li>
</ul>

我该如何解决？

我需要您的帮助。

Answer 1

您需要停止点击的传播，以免切换的菜单关闭。我对js进行了以下更改，并在CSS中将import numpy as np M = 10 N = 3 p = 15 Y = np.random.rand(p,N) X = np.random.rand(p,M) A = np.dot(np.transpose(X),X) B = np.dot(np.transpose(X),Y) sol = np.linalg.solve(A,B)添加到!important：

.shown

$('.dropdown-submenu').click(function(e) {
  e.stopPropagation();
  $(this).find('.dropdown-menu').toggleClass('shown');
});

.sidebar-nav .dropdown-menu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
}

.sidebar-nav .dropdown-submenu {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
  border: none;
  background-color: #FFF;
  box-shadow: none;
}

.dropdown-submenu .shown {
  display: block !important;
}

.dropdown-submenu .dropdown-menu {
  background: #CCC;
}

希望这行得通。

带有多个下拉菜单的侧边栏显示不正确

1 个答案: