单击时打开子下拉菜单

Question

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

有什么方法可以让下拉子菜单在点击时出现？这是我的代码 sn-p：

$('.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>

Answer 2

你可以使用id和href属性：

<ul>
    <li><a href="#dropdown1" class="link">Menu v</a>
        <ul id="dropdown1" style="display: none;">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#dropdown2" class="link">Item3 v</a>
               <ul id="dropdown2" style="display: none;">
                   <li><a href="#">SubItem1</a></li>
                   <li><a href="#">SubItem2</a></li>
               </ul>
            </li>
        </ul>
    </li>   
</ul>

<script>

    $(document).ready(function(){
        $(".link").click(function(){
            var e = $(this).attr("href");
            $(e).toggle();
        })
    })

</script>

此处示例：jsFiddle