我创建了一个下拉菜单;我有一个问题:
当我尝试点击ALL
或FILM
这样的标签时,它会关闭所有元素。
我必须再次点击按钮PRODUCT.dropdown-toggle
重新开启。
我的示例代码如下:
var App = function () {
return {
//Animate Dropdown
initAnimateDropdown: function () {
function MenuMode() {
jQuery('.dropdown').on('show.bs.dropdown', function (e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
jQuery('.dropdown').on('hide.bs.dropdown', function (e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
}
jQuery(window).resize(function () {
if (jQuery(window).width() > 768) {
MenuMode();
}
});
if (jQuery(window).width() > 768) {
MenuMode();
}
},
};
}();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="dropdown mega-menu-fullwidth active open">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container" style="width: 100%">
<div class="row equal-height">
<div class="col-sm-12 no-padding">
<div class="listproductmenu">
<ul class="nav nav-tabs" id="myTab">
<li class="">
<a data-toggle="tab" href="#tab-0" aria-expanded="false">
ALL
</a>
</li>
<li class="">
<a data-toggle="tab" href="#tab-1" aria-expanded="false">
FILM
</a>
</li>
<li class="active">
<a data-toggle="tab" href="#tab-2" aria-expanded="true">
MUSIC
</a>
</li>
</ul>
<div class="tab-content" style="padding: 20px">
<div id="tab-0" class="tab-pane fade">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Sonata">
Sonata
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Elantra">
Elantra
</a>
</div>
</div>
</div>
<div id="tab-1" class="tab-pane fade">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Sonata">
Sonata
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Elantra">
Elantra
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Accent">
Accent
</a>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane fade active in">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/santa-fe">
Santa Fe
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Tucson">
Tucson
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
&#13;
答案 0 :(得分:1)
您需要的只是单击事件处理程序stopPropagation
。
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
stopPropagation可防止事件冒泡DOM树,从而阻止任何父处理程序收到事件通知。
参见参考here
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
var App = function () {
//Fixed Header
function handleHeader() {
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 100) {
jQuery(".header-fixed .header-sticky").addClass("header-fixed-shrink");
}
else {
jQuery(".header-fixed .header-sticky").removeClass("header-fixed-shrink");
}
});
}
//Testing the Header for Smooth Scrolling
function handleTestHeader() {
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop()) {
jQuery(".header-fixed .header-sticky").addClass("header-fixed-shrink");
}
else {
jQuery(".header-fixed .header-sticky").removeClass("header-fixed-shrink");
}
});
}
//Header Mega Menu
function handleMegaMenu() {
jQuery(document).on('click', '.mega-menu .dropdown-menu', function (e) {
e.stopPropagation();
})
}
//Search Box (Header)
function handleSearch() {
jQuery('.search').click(function () {
if (jQuery('.search-btn').hasClass('fa-search')) {
jQuery('.search-open').fadeIn(500);
jQuery('.search-btn').removeClass('fa-search');
jQuery('.search-btn').addClass('fa-times');
} else {
jQuery('.search-open').fadeOut(500);
jQuery('.search-btn').addClass('fa-search');
jQuery('.search-btn').removeClass('fa-times');
}
});
}
//Search Box v1 (Header v5)
function handleSearchV1() {
jQuery('.header-v5 .search-button').click(function () {
jQuery('.header-v5 .search-open').slideDown();
});
jQuery('.header-v5 .search-close').click(function () {
jQuery('.header-v5 .search-open').slideUp();
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 1) jQuery('.header-v5 .search-open').fadeOut('fast');
});
}
//Sidebar Navigation Toggle
function handleToggle() {
jQuery('.list-toggle').on('click', function () {
jQuery(this).toggleClass('active');
});
/*
jQuery('#serviceList').on('shown.bs.collapse'), function() {
jQuery(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
}
jQuery('#serviceList').on('hidden.bs.collapse'), function() {
jQuery(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
}
*/
}
//Equal Height Columns
function handleEqualHeightColumns() {
var EqualHeightColumns = function () {
$(".equal-height-columns").each(function () {
heights = [];
$(".equal-height-column", this).each(function () {
$(this).removeAttr("style");
heights.push($(this).height()); // write column's heights to the array
});
$(".equal-height-column", this).height(Math.max.apply(Math, heights)); //find and set max
});
}
EqualHeightColumns();
$(window).resize(function () {
EqualHeightColumns();
});
$(window).load(function () {
EqualHeightColumns("img.equal-height-column");
});
}
//Hover Selector
function handleHoverSelector() {
$('.hoverSelector').on('hover', function (e) {
$('.hoverSelectorBlock', this).toggleClass('show');
e.stopPropagation();
});
}
//Bootstrap Tooltips and Popovers
function handleBootstrap() {
/*Bootstrap Carousel*/
jQuery('.carousel').carousel({
interval: 15000,
pause: 'hover'
});
/*Tooltips*/
jQuery('.tooltips').tooltip();
jQuery('.tooltips-show').tooltip('show');
jQuery('.tooltips-hide').tooltip('hide');
jQuery('.tooltips-toggle').tooltip('toggle');
jQuery('.tooltips-destroy').tooltip('destroy');
/*Popovers*/
jQuery('.popovers').popover();
jQuery('.popovers-show').popover('show');
jQuery('.popovers-hide').popover('hide');
jQuery('.popovers-toggle').popover('toggle');
jQuery('.popovers-destroy').popover('destroy');
}
return {
init: function () {
handleBootstrap();
handleSearch();
handleSearchV1();
handleToggle();
handleHeader();
handleTestHeader();
handleMegaMenu();
handleHoverSelector();
handleEqualHeightColumns();
},
//Scroll Bar
initScrollBar: function () {
jQuery('.mCustomScrollbar').mCustomScrollbar({
theme: "minimal",
scrollInertia: 300,
scrollEasing: "linear"
});
},
//Counters
initCounter: function () {
jQuery('.counter').counterUp({
delay: 10,
time: 1000
});
},
//Parallax Backgrounds
initParallaxBg: function () {
jQuery(window).load(function () {
jQuery('.parallaxBg').parallax("50%", 0.2);
jQuery('.parallaxBg1').parallax("50%", 0.4);
});
},
//Animate Dropdown
initAnimateDropdown: function () {
function MenuMode() {
jQuery('.dropdown').on('show.bs.dropdown', function (e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});
jQuery('.dropdown').on('hide.bs.dropdown', function (e) {
jQuery(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});
}
jQuery(window).resize(function () {
if (jQuery(window).width() > 768) {
MenuMode();
}
});
if (jQuery(window).width() > 768) {
MenuMode();
}
},
};
}();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<li class="dropdown mega-menu-fullwidth active open">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">PRODUCT
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container" style="width: 100%">
<div class="row equal-height">
<div class="col-sm-12 no-padding">
<div class="listproductmenu">
<ul class="nav nav-tabs" id="myTab">
<li class="">
<a data-toggle="tab" href="#tab-0" aria-expanded="false">
ALL
</a>
</li>
<li class="">
<a data-toggle="tab" href="#tab-1" aria-expanded="false">
FILM
</a>
</li>
<li class="active">
<a data-toggle="tab" href="#tab-2" aria-expanded="true">
MUSIC
</a>
</li>
</ul>
<div class="tab-content" style="padding: 20px">
<div id="tab-0" class="tab-pane fade">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Sonata">
Sonata
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Elantra">
Elantra
</a>
</div>
</div>
</div>
<div id="tab-1" class="tab-pane fade">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Sonata">
Sonata
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Elantra">
Elantra
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Accent">
Accent
</a>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane fade active in">
<div class="row">
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/santa-fe">
Santa Fe
</a>
</div>
<div class="col-sm-2 itemmenu" style="text-align: center; margin: 15px 0;">
<a href="/product/Tucson">
Tucson
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>