twitter-bootstrap - 适用于平板电脑的下拉菜单，内部有下拉菜单(Bootstrap-navbar)

Question

我尝试制作一个内部有下拉菜单的导航栏，但在这个中，我不想在里面有下拉菜单。但是当我点击它时，菜单关闭。我不想阻止这个功能，当我点击它时它就会消失，因为我认为这是因为它无法工作。我在 https://github.com/twitter/bootstrap/pull/3383 上看到了一个关于 stopPropagation 的事情但我不知道在哪里可以声明这一点，而且它不是一个公式。

编辑:我无法使用 li class="dropdown-submenu"因为当您使用手机或平板电脑时，菜单会在您触摸其中的链接时关闭。

这是我的代码:

<div class="bs-docs-example">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="/app/alink">Title</a>
          <div class="nav-collapse collapse navbar-responsive-collapse">
                <ul class="nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Article A<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/app/alink">Title Article 1-A</a></li>
                            <li><a href="/app/alink">Title Article 2-A</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">More ...<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Article B<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="/app/alink">article 1-B</a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Article C<b class="caret"></b></a></li>
                            <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Article D<b class="caret"></b></a></li>
                        </ul>
                    </li> 
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

我找到了另一个解决方案。我在代码后面添加了这一点:

<script type="text/javascript"> 
$('.dropdown-menu').click(function(event){
    event.stopPropagation();
});
</script>

下拉菜单无法与此解决方案配合使用，因此我使用“下拉子菜单”来解决该问题(感谢@Schmalzy)。因此，当我触摸链接时，子菜单就会打开。如果没有上面的代码，子菜单就无法在平板电脑上正常工作。