Question

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

有没有办法让点击子菜单出现在点击？这是我的代码段：

＆＃13;

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

＆＃13;

    <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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

.dropdown-menu{
  display: none;
}

＆＃13;

<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>

＆＃13;

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>

此处示例：See the image

打开点击下拉菜单

2 个答案: