Jquery event.preventDefault()不起作用

Jquery event.preventDefault() not working

本文关键字：不起作用 preventDefault event Jquery      更新时间：2023-09-26

我想让我的菜单显示和隐藏列表项点击默认情况下，他们是隐藏的。问题是我的菜单是在管理部分生成的，所以它自动分配网站的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&amp;loc_id=24"><span class="menu-title">Burlington Mall, MA</span></a>
                                        </li>
                                        <li class=" "><a href="index.php?route=common/location_details&amp;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&amp;loc_id=26"><span class="menu-title">Brunswick Square Mall, NJ</span></a>
                                        </li>
                                        <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=30"><span class="menu-title">Garden State Plaza, NJ</span></a>
                                        </li>
                                        <li class=" "><a href="index.php?route=common/location_details&amp;loc_id=27"><span class="menu-title">Menlo Park Mall, NJ</span></a>
                                        </li>
                                        <li class=" "><a href="index.php?route=common/location_details&amp;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&amp;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&amp;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&amp;loc_id=32"><span class="menu-title">CrabTree Valley, NC</span></a>
                                        </li>
                                        <li class=" "><a href="index.php?route=common/location_details&amp;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中，它按照您的期望工作。

相关文章：