当Twitter引导下拉菜单导航菜单完成其操作时，调整一些CSS

Adjust some CSS when Twitter bootsrap Dropdown Nav menu is finished it's operation

本文关键字：操作 调整 CSS Twitter 下拉菜单 导航 菜单      更新时间：2023-09-26

我想在Twitter Bootsrap中的导航下拉菜单完成操作时使用JS对CSS进行一些调整。（即当它完全关闭、完全启动或其中一个子菜单操作完成时）。

我认为我想做的并不是特别相关，但它基本上只是与更改背景div 的高度以匹配下拉列表的高度有关。

我已经看过引导折叠jquery，但它对我来说真的太复杂了，无法弄清楚。谁能告诉我，如果有更简单的方法来实现这一目标，我应该钩入什么。

这是相关代码： 我想做的是在此下拉列表完全扩展时触发一些东西

<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<nav >
<ul class="nav">
    <li ><a href="#">Home</a></li>
    <li ><a href="#">About</a></li>
    <li ><a href="#">Pages</a></li>
    <li >Pages</a>
    <ul class="sub-menu">
        <li ><a href="">Quamquam tu hanc copiosiorem</a></li>
        <li ><a href="">Quamquam tu hanc copiosiorem</a></li>
        <li ><a href="">Quamquam tu hanc copiosiorem</a></li>
    </ul>
    </li>
</ul>


</div>
</div>
</div>
您需要

查看代码"DROPDOWN CLASS DEFINITION"部分下的boostrap.js文件。

在查看代码时，这样的事情应该让你开始。

$("a.dropdown-toggle").on('click.dropdown.data-api','', function(r) { 
      console.log(r) 
})

从 bootstrap.js 中的代码中，这将在下拉列表隐藏时触发。

$('html').on('click.dropdown.data-api', function () { 
   ///... 
})

如果你正在寻找折叠的东西，那么你需要看看"COLLAPSIBLE DATA-API"选择。

相关文章：