我可以以编程方式关闭可折叠导航栏显示的下拉菜单吗？答案

【问题标题】：Can I programmatically close dropdown menu displayed by collaspable NavBar?我可以以编程方式关闭可折叠导航栏显示的下拉菜单吗？
【发布时间】：2023-03-17 16:13:02
【问题描述】：

我有这个启用了 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”后，我希望下拉菜单折叠。

这是针对小型移动设备的。这很容易做到吗？

【问题讨论】：

标签： jquery html css twitter-bootstrap-3

【解决方案1】：

使用下拉（'toggle'）方法

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

【讨论】：

您好，感谢您的评论。它对我不起作用。我可能会误解你的意思。我已经修改了我的问题以显示您建议的更改。谢谢
您的选择器错误。而不是 $("#Select1") 使用 $("#mySelector")
嗨，是的。那只是一个复制和粘贴错误。现在更新了。但它仍然不起作用:(
这在某些情况下可能会正常工作，但是对于不同的下拉显示位置，我发现在按钮上添加“data-toggle='dropdown'”会更可靠。
在我的情况下（使用引导程序 3），这以某种方式破坏了在后续按下时切换它的按钮。

【解决方案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>

【讨论】：

我一定是做错了什么。虽然引发了事件.. :(
@Andrew Simpson 明白，请确保将“您的下拉菜单”替换为您要触发的下拉菜单。（我认为）在你的情况下是这样的： $("#example-navbar-collapse").dropdown("toggle); 让我知道这是否有效。
我刚刚更新了这个答案，试试看，如果可行，请告诉我。
您好，感谢您的所有时间。我确实找到了答案（如下），但我也会尝试一下。

【解决方案3】：

我发现把这个放进去：

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

成功了。

希望对某人有所帮助...

【讨论】：

【解决方案4】：

将下面的行添加到 div 标签

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

像这样在 HTML 中

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

在js/ts中

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

【讨论】：