jquery - 点击打开子下拉菜单

Question

给定以下代码，我想在单击 时打开下拉子菜单Item3，而不关闭父下拉菜单。 index.html 中的 jquery 代码不起作用，即当我在主下拉列表中单击 Item3 时，整个下拉列表关闭。

有没有办法让下拉子菜单在点击时出现？这是我的代码片段:

$('.dropdown.dropdown-submenu').click(function() {
  $('.dropdown-submenu > .dropdown-menu').css('display', 'block');
  return false;
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<li className="dropdown">
    <a
        href="#"
        className="dropdown-toggle"
        data-toggle="dropdown"
        role="button"
        aria-haspopup="true"
        aria-expanded="false"
    >
    <span className="fa fa-files-o navigationGlyphicon"></span>
       MainMenu
    <span className="caret"></span>
    </a>
    <ul className="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><a href="#">Item1</a></li>
      <li><a href="#">Item2</a></li>
      <li role="separator" className="divider"></li>
      <li className="dropdown dropdown-submenu">
        <a tabIndex="-1" href="#" className="dropdown-toggle" data-toggle="dropdown">Item3 <span className="caret"></span>
                       </a>
        <ul className="dropdown-menu">
          <li><a href="#">SubItem1</a></li>
          <li><a href="#">SubItem2</a></li>
        </ul>
      </li>
    </ul>

Answer 1

我不知道你为什么要为 html 元素使用 className 自定义属性，但是使用默认的 class 属性和 JQuery，你可以通过这种方式切换子菜单:

$('.dropdown.dropdown-submenu').click(function() {
            $('.dropdown-submenu > .dropdown-menu').toggle(); 
            return false;
        });

.dropdown-menu{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul className="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown dropdown-submenu">
               <a
                  tabIndex="-1"
                  href="#"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
               >Item3 <span class="caret"></span>
               </a>
               <ul class="dropdown-menu">
                   <li><a href="#">SubItem1</a></li>
                   <li><a href="#">SubItem2</a></li>
               </ul>
            </li>
    </ul>