Bootstrap Dropdown effect - jQuery
Bootstrap Dropdown effect - jQuery
我有一个引导菜单,但About Us
上的下拉菜单效果不佳。在此处尝试演示:https://jsfiddle.net/wbbpdfm7/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
body {
margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" style="background:#fff">
<div class="container">
<div class="navbar-header title">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul id="menu-primary-menu" class="nav">
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children dropdown menu-item-13">
<a href="http://localhost:8888/about-us/" class="dropdown-toggle" data-toggle="dropdown">About Us<b class="caret"></b></a>
<ul class="dropdown-menu depth_0">
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
<a href="http://localhost:8888/about-us/the-team/">The Team</a>
</li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39">
<a href="http://localhost:8888/about-us/michael/">Michael</a>
</li>
</ul>
</li>
<li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
<a href="http://localhost:8888/bespoke/">Bespoke</a>
</li>
<li id="menu-item-15" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15">
<a href="http://localhost:8888/category/blog-news/">Blog</a>
</li>
<li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item active menu-item-11">
<a href="http://localhost:8888/contact-us/">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
看看我如何单击菜单图标,我希望打开About Us
子菜单,但它没有打开。
我做错了什么?
您已从<ul id="menu-primary-menu" class="nav">
中删除了.navbar-nav
,因此需要在移动视图中复制其级联样式。
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: rgba(0, 0, 0, 0);
border: 0;
box-shadow: none;
}}
将上面的 CSS 中的.navbar-nav
替换为您选择的类,以避免冲突并进一步调整您的设计。
相关文章:
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 如何使用jQuery自动打开页面上的所有链接
- 为effect Composer创建GodRays效果过程
- 如何使用jquery在填充自动完成的值后使文本框只读
- jQuery:循环一个具有不同超时值的循环
- 用程序搜索JQuery数据表中的文本
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- jQuery匹配JSON对象的部分文本
- Jquery POST未填充数组
- Time a jQuery fadeTo Effect?
- Bootstrap Dropdown effect - jQuery
- Javascript/JQuery to do rollover-effect confirm
- 无法识别jquery effect()函数
- application.js can't find jquery.ui.effect-blind
- JS,CSS,jQuery DIV 3D effect
- Jquery Fadein() effect
- 在运行jQuery effect时阻止提交
- jQuery .hover effect 'color'不能正常工作
- 使用具有固定位置元素的JQuery effect()阻止队列
- jQuery effect.fadeTo()带有切换