Jquery event.preventDefault()不起作用
Jquery event.preventDefault() not working
我想让我的菜单显示和隐藏列表项点击默认情况下,他们是隐藏的。问题是我的菜单是在管理部分生成的,所以它自动分配网站的url给它,如果我在菜单选项中设置特定链接的url字段为空。所以当我点击它时,它会重新加载主页。
我想要的是,当我点击任何父li它应该停止生成默认事件,所以使用防止默认。但在我的情况下,它不工作,它重新加载页面后,显示列表项那里的父。
这里有一把小提琴小提琴Html<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><a href="index.php?route=common/location_details&loc_id=24"><span class="menu-title">Burlington Mall, MA</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=25"><span class="menu-title">Burlington Mall, MA - Cart</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><a href="index.php?route=common/location_details&loc_id=26"><span class="menu-title">Brunswick Square Mall, NJ</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=30"><span class="menu-title">Garden State Plaza, NJ</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=27"><span class="menu-title">Menlo Park Mall, NJ</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=29"><span class="menu-title">Ocean County Mall, NJ</span></a>
</li>
<li class=" "><a href=""><span class="menu-title">Rockaway Townsquare, NJ</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><a href="index.php?route=common/location_details&loc_id=31"><span class="menu-title">Galleria at White Plains, NY</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=42"><span class="menu-title">Manhattan, NY-Toys 'R' Us </span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><a href="index.php?route=common/location_details&loc_id=32"><span class="menu-title">CrabTree Valley, NC</span></a>
</li>
<li class=" "><a href="index.php?route=common/location_details&loc_id=2"><span class="menu-title">Fayetteville, NC</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
}
});
Css
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
{
padding:10px;
position: relative;
margin:auto;
}
下面是一个工作示例:http://jsfiddle.net/hk1w89zw/
不确定你想用id prop
达到什么目的。一般来说,最好将onClick
事件设置在链接(<a>
-标签)上,而不是li
上。并使用以下jQuery代码:
$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).closest('.parent').find('.dropdown-mega.level2').show();
});
也许你想要这样的东西
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
window.location.href="location_of_the_filehere";
}
event.preventDefault();
});
在触发event
时捕获
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
event.preventDefault();
}
我得承认我把你的代码写错了。
这是一个https://jsbin.com/gigowopijo/3/edit?html,js,console,output (JSBin)。
首先你没有一个id为"#li_menu169"的列表。添加到ul元素
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner">
<ul id="li_menu169">
之后,您显示和隐藏相同的元素,这有点令人困惑。因此,我建议先隐藏所有的内部元素,然后再显示"this"的内部元素。
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).attr('id');
if (id === 'yes' && typeof id !== undefined) {
console.log("I'm there");
//i want to prevent
} else {
console.log("i'm here");
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).find('.dropdown-mega.level2').show();
//redirect
}
});
在JSbin中,它按照您的期望工作。
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0)在Firefox中不起作用
- 退出全屏不起作用