我从互联网上的模板中获取了一个下拉列表。这就是我所痴迷的，但遇到了麻烦。问题是，每当我点击下拉菜单上的每个链接时，下拉菜单就会关闭。这是代码：
jQuery(document).ready(function($){
//open/close mega-navigation
$('.cd-dropdown-trigger').on('click', function(event){
event.preventDefault();
toggleNav();
});
//close meganavigation
$('.cd-dropdown .cd-close').on('click', function(event){
event.preventDefault();
toggleNav();
});
//on mobile - open submenu
$('.has-children').children('a').on('click', function(event){
//prevent default clicking on direct children of .has-children
event.preventDefault();
var selected = $(this);
selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
});
//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
var submenuDirection = ( !$('.cd-dropdown-wrapper').hasClass('open-to-left') ) ? 'right' : 'left';
$('.cd-dropdown-content').menuAim({
activate: function(row) {
$(row).children().addClass('is-active').removeClass('fade-out');
if( $('.cd-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
},
deactivate: function(row) {
$(row).children().removeClass('is-active');
if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
$('.cd-dropdown-content').find('.fade-in').removeClass('fade-in');
$(row).children('ul').addClass('fade-out')
}
},
exitMenu: function() {
$('.cd-dropdown-content').find('.is-active').removeClass('is-active');
return true;
},
submenuDirection: submenuDirection,
});
//submenu items - go back link
$('.go-back').on('click', function(){
var selected = $(this),
visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
});
function toggleNav(){
var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
$('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
$('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
if( !navIsVisible ) {
$('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
$('.has-children ul').addClass('is-hidden');
$('.move-out').removeClass('move-out');
$('.is-active').removeClass('is-active');
});
}
}
//IE9 placeholder fallback
//credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
if(!Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
}
});
HTML代码
<div class="cd-dropdown-wrapper nav-div cd-dropdown-trigger" href="#0" id="nav-icon2">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<nav class="cd-dropdown">
<h2>Title</h2>
<a href="#0" class="cd-close">Close</a>
<ul class="cd-dropdown-content">
<li class="has-children"><a href="http://codyhouse.co/?p=748">Catalog</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a href="#0">Menu</a></li>
<li class="see-all"><a href="https://global-travel-clothing.myshopify.com/pages/shop-travel-jackets-with-lots-of-pockets">All Products</a></li>
<li class="has-children"><a href="">Travel Gear</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0">Clothing</a></li>
<li class="has-children"><a href="#0">Soft Shell</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0"></a></li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/soft-shell-gen1">Soft Shell Gen1</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/soft-shell-joey">Soft Shell Joey</a></li>
<li class="see-all"><a href="https://global-travel-clothing.myshopify.com/collections/soft-shell-jackets">All Soft Shell Jackets</a></li>
</ul>
</li>
<li class="has-children"><a href="#0">Sweatshirts</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0"></a></li>
<li class="see-all"><a href="https://global-travel-clothing.myshopify.com/collections/sweatshirt-travel-jackets">All Sweatshirt Jackets</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/sweatshirt-gen1">Sweatshirts Gen1</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/sweatshirt-joey">Sweatshirt Joey</a></li>
</ul>
</li>
<li class="has-children"><a href="#0">Polar Fleece</a>
<ul class="is-hidden">
<li class="go-back"><a href="#0"></a></li>
<li class="see-all"><a href="https://global-travel-clothing.myshopify.com/collections/polar-fleece">All Polar Fleece</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/polar-fleece/products/polar-fleece-liner">Polar Fleece Gen1</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/polar-fleece/products/joey-polar-fleece-zip-in-liner">Joey Polar Fleece</a></li>
</ul>
</li>
<li><a href="https://global-travel-clothing.myshopify.com/collections/windbreaker-travel-jackets">Windbreakers</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/products/sleepmasktravelpillow">Travel Pillow</a></li>
</ul>
</li>
</ul>
<!-- .cd-secondary-dropdown -->
</li>
<li><a href="https://global-travel-clothing.myshopify.com/pages/about-us-who-makes-these-travel-jackets">About Us</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/pages/frequently-asked-questions-about-travel-jackets">FAQ</a></li>
<li><a href="https://global-travel-clothing.myshopify.com/pages/affiliate-area-global-travel-clothing">Make Money Selling our Jackets</a></li>
</ul>
<!-- .cd-dropdown-content -->
</nav>
<!-- .cd-dropdown -->
</div>
<script>
$(document).ready(function(){
$('#nav-icon2').click(function(){
$(this).toggleClass('open');
});
});
$("document").ready(function() {
$('#nav-icon2').on('click', function(e) {
if($(this).hasClass('open')) {
e.stopPropagation();
}
});
});
</script>
答案 0 :(得分：0)
如果你有一个打开和关闭按钮，你应该做一个隐藏节目。不是切换。 例如，有一个按钮可以添加样式或添加一个带有CSS显示的类：无;
<div style="display:none;">Hidden Stuff</div>
然后有一个按钮，为它提供CSS属性display：block;
<div style="display:block;">Shown Stuff</div>
但更重要的是，它不包含在snippit中，但我想我会问，你是否在index.html的<head>标记中包含了jQuery？