【发布时间】：2015-01-10 14:09:02
【问题描述】：
我尝试使用此解决方案禁用悬停下拉菜单仅当导航栏折叠时 Disable dropdown on hover for bootstrap when navbar is collapsed 但它不能正常工作:(
当我在移动设备或平板电脑上使用页面时，悬停时下拉菜单很烦人。我只想在导航栏折叠时通过单击来制作下拉菜单。
/*
* Project: Twitter Bootstrap Hover Dropdown
* Author: Cameron Spear
* Contributors: Mattia Larentis
*
* Dependencies?: Twitter Bootstrap's Dropdown plugin
*
* A simple plugin to enable twitter bootstrap dropdowns to active on hover and provide a nice user experience.
*
* No license, do what you want. I'd love credit or a shoutout, though.
*
* http://cameronspear.com/blog/twitter-bootstrap-dropdown-on-hover-plugin/
*/
;
(function($, window, undefined) {
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function(options) {
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function() {
var $this = $(this).parent(),
defaults = {
delay: 500,
instantlyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
settings = $.extend(true, {}, defaults, options, data),
timeout;
$this.hover(function() {
if (settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$(this).find('.dropdown-menu').filter(':first').slideDown();
$(this).addClass('open');
}, function() {
timeout = window.setTimeout(function() {
$this.find('.dropdown-menu').slideUp();
$this.removeClass('open');
}, settings.delay);
});
});
};
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$(document).ready(function() {
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);// Custom styles
html {
position: relative;
min-height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', sans-serif;
}
// a {
// text-decoration: none !important;
// }
.overflow {
overflow: hidden;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
clear: both;
}
.navigation {
-webkit-box-shadow: inset 0px -2px 0px 0px #d3cdc4;
-moz-box-shadow: inset 0px -2px 0px 0px #d3cdc4;
box-shadow: inset 0px -2px 0px 0px #d3cdc4;
}
.navbar {
margin-bottom: 0;
position: relative;
a {
text-shadow: none !important;
color: @gray !important;
cursor: default !important;
font-weight: 400;
font-size: 15px;
}
.nav {
text-shadow: none !important;
margin-top: 34px;
.info {
a {
padding: 0 0 0 5px;
}
span {
padding: 0 !important;
top: 12px;
font-size: 16px;
color: @projectLightBlue;
}
}
.active {
a {
background: none !important;
border-bottom: 2px solid@projectLightBlue;
color: @projectLightBlue !important;
text-shadow: none;
.box-shadow(none);
&: hover {
.box-shadow(none);
}
}
}
.non-active {
a {
background: none !important;
border-bottom: 2px solid transparent;
text-shadow: none;
.box-shadow(none);
}
}
}
.navbar-info {
position: absolute;
right: 0;
margin-top: 5px;
color: @grayLight;
a {
color: @grayLight !important;
font-size: 14px;
}
span {
font-size: 12px;
color: @grayLight;
}
.glyphicon-phone-alt {
top: 0px;
}
}
.dropdown {
border-bottom: none !important;
// .caret {
// border-top-color: @gray !important;
// }
span {
font-size: 8px;
top: -2px;
}
.dropdown-menu {
margin: 0;
padding: 0;
border: 1px solid #eee;
-webkit-box-shadow: 0px -2px 0px 0px@projectLightBlue;
-moz-box-shadow: 0px -2px 0px 0px@projectLightBlue;
box-shadow: 0px -2px 0px 0px@projectLightBlue;
background: @white;
.border-radius(0);
font-size: 13px !important;
&: before, &: after {
content: none !important;
}
li {
margin-left: 0px;
}
a {
padding: 5px 15px;
color: @gray !important;
font-weight: 400;
border-bottom: none !important;
.transition(all 0.3s);
&: hover {
background: lighten(@gray, 10%) !important;
color: @white !important;
}
}
.active-dropdown {
a {
padding: 5px 15px;
background: lighten(@gray, 10%) !important;
color: @white !important;
font-weight: 400;
border-bottom: none !important;
.transition(all 0.3s);
}
}
}
}
.open {
.dropdown-toggle {
background: none !important;
border-bottom: 2px solid@projectLightBlue;
}
}
.brand {
padding: 25px 0;
margin: 0;
border-bottom: none;
&: hover {
background: none !important;
}
}
.navbar-inner {
padding: 0;
background: none;
border: none;
.border-radius(0);
.box-shadow(none);
}
.btn-navbar {
background: @projectLightBlue;
margin: 40px 0 0 0;
border: none;
.border-radius(0);
&: hover {
background: @gray !important;
}
}
}
.slider-underline {
border-bottom: 2px solid #d3cdc4;
// height: 2px;
// width: 100%;
// background: #d3cdc4;
// position: absolute;
}
.reason {
overflow: hidden;
margin-bottom: 10px;
padding: 15px 15px 10px;
}
@media (max-width: @navbarCollapseWidth) {
body {
width: 100%;
padding: 0;
margin: 0;
}
.navbar {
.brand {
padding-left: 10px !important;
}
.navbar-info {
padding-right: 10px !important;
}
.btn-navbar {
margin-right: 10px !important;
}
.nav {
margin-top: 0;
a {
.border-radius(0) !important;
font-weight: 400 !important;
border-bottom: 1px solid@grayLighter !important;
margin-bottom: 0px !important;
}
.active {
a {
border-bottom: none !important;
background: @projectLightBlue !important;
color: @white !important;
text-shadow: none;
.box-shadow(none);
&: hover {
.box-shadow(none);
}
}
}
.active,
.non-active {
.dropdown-menu {
a {
background: none !important;
color: @grayLight !important;
padding-left: 25px;
&: hover {
color: @gray !important;
}
}
.active-dropdown {
background: @grayLight !important;
a {
color: @white !important;
}
}
}
}
.dropdown-menu {
.box-shadow (none);
border: none !important;
a {
border-bottom: 1px solid@grayLighter !important;
}
}
.last {
a {
border-bottom: none !important;
}
}
.info {
display: none;
}
}
}
}
@media (min-width: 768px) and (max-width: 979px) {
.navbar {
.brand {
padding-left: 0px !important;
}
.navbar-info {
padding-right: 0px !important;
}
.btn-navbar {
margin-right: 0px !important;
}
}
}<div class="wide navigation">
<div class="container">
<div class="row">
<div class="span12">
<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 pull-left" href="#">LOGO</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
HOME
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li class="active-dropdown"><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
YOUR SERVICES
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
PRICE-LIST
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
GALLERY
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="dropdown non-active last">
<a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0">
CONTACT
<span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
</a>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a>
</li>
<li><a href="#">Option 2</a>
</li>
<li class="last"><a href="#">Option 3</a>
</li>
</ul>
</li>
<li class="info visible-lg-*">
<a href="#" data-toggle="modal" data-target="#nuca"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a>
</li>
<!-- Modal -->
<div id="nuca" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Nuca Template</h3>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, reiciendis laborum tenetur, animi architecto ullam facere amet cum quia, quo aut blanditiis quod ut minima aliquid excepturi, quam perspiciatis omnis. Consequuntur
eos, odit molestiae similique reiciendis at cumque eius libero, distinctio repellendus quia perferendis, quod facilis quae ad ab ducimus officia. Minus perspiciatis quia velit, ab doloremque quasi iusto accusantium praesentium
tenetur, obcaecati aperiam accusamus labore aut commodi nisi sunt! Earum consectetur quibusdam culpa, assumenda praesentium cum, modi eligendi magnam laborum voluptatibus nemo animi a ducimus voluptatem. Earum culpa excepturi expedita
tempore in accusamus doloribus impedit fugiat. Laboriosam, placeat, eveniet.</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Zamknij</button>
</div>
</div>
</ul>
</div>
<!-- nav-collapse -->
</div>
<!-- /container -->
</div>
<!-- /navbar-inner -->
</div>
<!-- /navbar -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /wide -->【问题讨论】：
标签： twitter-bootstrap hover navbar collapse