0
我試圖TU使用此解決方案對懸停只有當導航欄被摺疊 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 {
// \t 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 [email protected];
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 {
// \t 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 [email protected];
-moz-box-shadow: 0px -2px 0px [email protected];
box-shadow: 0px -2px 0px [email protected];
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 [email protected];
}
}
.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 [email protected] !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 [email protected] !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">
\t \t \t \t \t \t \t \t \t \t \t \t HOME
\t \t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
\t \t \t \t \t \t \t \t \t \t \t </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">
\t \t \t \t \t \t \t \t \t \t \t \t YOUR SERVICES
\t \t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
\t \t \t \t \t \t \t \t \t \t \t </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">
\t \t \t \t \t \t \t \t \t \t \t \t PRICE-LIST
\t \t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
\t \t \t \t \t \t \t \t \t \t \t </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">
\t \t \t \t \t \t \t \t \t \t \t \t GALLERY
\t \t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
\t \t \t \t \t \t \t \t \t \t \t </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">
\t \t \t \t \t \t \t \t \t \t \t \t CONTACT
\t \t \t \t \t \t \t \t \t \t \t \t <span class="glyphicon glyphicon glyphicon-chevron-down" aria-hidden="true">
\t \t \t \t \t \t \t \t \t \t \t </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 -->
你不明白。我只想在導航欄摺疊（平板電腦和手機）時禁用懸停下拉菜單。當頁面在桌面上打開時，它仍然可以通過懸停工作。 –
Gotcha。這裏有一個解釋如何在特定窗口大小上啓用JavaScript的鏈接。 http://www.coalmarch.com/blog/how-to-execute-javascript-based-on-screen-size-using-jquery然而，你的代碼中有很多錯誤。你的許多關閉標籤都在錯誤的地方。這就是爲什麼你在你的小提琴上有明亮的紅色代碼。很多清理工作要做才能解決您的js問題。 –