[英]Programmatically toggle bootstrap 3 navigation bar
我在引導程序 3 導航欄中使用了一些項目,如下所示:
<nav class="navbar navbar-inverse navbar-fixed-top" id="toggleNav" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="javascript:logout();"><span class="glyphicon glyphicon-log-out"></span> Logout</a>
</li>
<li>
<a href="#" id="online-offline" toggle="offline"><span class="glyphicon glyphicon-off"></span> Go offline</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
當我點擊第二個項目(“離線”)時,我使用 jquery 來調用一個模態窗口。 在移動設備上,我必須首先折疊菜單才能到達鏈接,然后當我單擊該項目時,我才能正確地獲得我的模態窗口。
我需要實現的是在顯示模式之前隱藏導航欄折疊。 是否可以以編程方式切換導航欄折疊? 我怎樣才能做到這一點 ?
正如您所說,該事件將運行一個模態。
因此,當您的模式(稱為 yourModal )顯示時(顯示之前),只需隱藏菜單:
JS:
$('.yourModal').on('show.bs.modal', function(){
$('.navbar-collapse').collapse('hide');
});
以下是文檔:
在@Jahnux73 的幫助下,我自己弄明白了。 所以我唯一要做的就是添加:
data-toggle="collapse" data-target=".navbar-ex1-collapse"
到我想切換導航欄的特定鏈接。 所以鏈接現在如下所示:
<a href="#" id="online-offline" data-toggle="collapse"
data-target=".navbar-ex1-collapse" toggle="offline">
<span class="glyphicon glyphicon-off"></span> Go offline
</a>
添加自定義類以切換導航欄(me-toggle),以便使用真值切換變量:
<a href="javascript:;" class="dropdown-toggle me-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-envelope-open"></i>
<span class="badge badge-default"> 4 </span>
</a>
<ul class="dropdown-menu ">
<li class="external">
<h3>You have<span class="bold">7 New</span> Messages</h3>
<a href="app_inbox.html">view all</a>
</li>
<li>
item 1
</li>
<li>
item 2
</li>
</ul>
然后在單擊導航欄事件中:
toggle: true;
$('a.me-toggle').click(() => {
toggle = !toggle;
});
$('.dropdown').on({
"click": function(event) {
},
"hide.bs.dropdown": function(event) {
return toggle;
}
});
只需使用:
$('.collapse').collapse();
首先,為您的按鈕標簽添加一個 id。
<button id="idToggleButton" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
比給你的折疊 div 添加一個 id
<div id="divCollapse" class="collapse navbar-collapse navbar-ex1-collapse">
最后,您可以在 divCollapse 可見時以編程方式單擊
if ($('#divCollapse').is(":visible")){
$('#idToggleButton').click();
}
或者什么時候看不見
if (!$('#divCollapse').is(":visible")){
$('#idToggleButton').click();
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.