Question

我启用了这个启动Bootstrap的HTML标记：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width: 100%">
    <div class="navbar-header" style="width: 100%">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example- navbar-collapse">
            <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
        </button>
        <div style="color: #FFFFFF">
            <div>
                <h4 style="text-indent: 15px; padding: 0px; margin: 10px 0px 0px 0px;">
                    <span style="color: #FFFFFF;">Title#1</span><span style="color:  #1f7fbb">Motion</span>
                </h4>
                <h4 style="padding: 0px; margin: 0px; text-indent: 15px">
                    <small style="font-size: x-small;">Title#2</small>
                </h4>
             </div>
         </div>
         <div class="collapse navbar-collapse" id="example-navbar-collapse">
             <ul  id="Select1" class="nav navbar-nav">
                 <li class="active"><a href="#">iOS</a></li>
                 <li><a href="#">SVN#1</a></li>
                 <li><a href="#">SVN#2</a></li>
             </ul>
         </div>
     </div>
 </div>
</nav>

<script type="text/javascript" >
    function test() {
        alert('hi');
        $("#example-navbar-collapse").dropdown('toggle');
    }
</script>

请原谅我这是一个基本问题，但是在用户点击/触摸了SVN＃2＆＃39;我希望下拉崩溃。

这适用于小型移动设备。这可以轻松完成吗？

Answer 1

使用下拉（'切换'）方法

$("<selector here to select your dropdown>").dropdown('toggle')

Answer 2

这样做：

<li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click Me</a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">SVN#1</a></li>
             <li><a href="#">SVN#2</a></li>
      </ul>
    </li>

用以下代码替换您的代码：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="width: 100%">
<div class="navbar-header" style="width: 100%">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example- navbar-collapse">
        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                        class="icon-bar"></span><span class="icon-bar"></span>
    </button>
    <div style="color: #FFFFFF">
        <div>
            <h4 style="text-indent: 15px; padding: 0px; margin: 10px 0px 0px 0px;">
                <span style="color: #FFFFFF;">Title#1</span><span style="color:  #1f7fbb">Motion</span>
            </h4>
            <h4 style="padding: 0px; margin: 0px; text-indent: 15px">
                <small style="font-size: x-small;">Title#2</small>
            </h4>
         </div>
     </div>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Click Me</a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">SVN#1</a></li>
             <li><a href="#">SVN#2</a></li>
      </ul>
    </li>
 </div>

Answer 3

我发现了这个：

<a href="#" id="svn1" data-toggle="collapse" data-target=".navbar-collapse">

做了这个伎俩。

希望它有所帮助...

Answer 4

将以下行添加到div标签

data-toggle =“ dropdown” id =“ dropbox”

像这样的HTML

<div data-toggle="dropdown" id="dropbox"

在js / ts中

$('#dropbox').trigger('click.bs.dropdown');

我可以以编程方式关闭可折叠NavBar显示的下拉菜单吗？

4 个答案:

data-toggle =“ dropdown” id =“ dropbox”