Question

我正在javascript中创建一个下拉导航。任何有孩子的列表项我想阻止默认操作并执行其他操作。我有这个工作，但在应用时，默认操作也应用于子列表项。

这是我的HTML：

<i id="mobnavtrig" class="fa fa-align-justify fa-2x"></i>
    <div class="mobilenav">
        <li class="page_item page-item-2"><a href="/">Home</a></li>
        <li class="page_item page-item-10"><a href="?page_id=10">Who We Are</a></li>
        <li class="page_item page-item-25 page_item_has_children current_page_item parent"><a href="?page_id=25">Case Studies</a>
            <ul class='children'>
                <li class="page_item page-item-55"><a href="?page_id=55">Barratt Developments</a></li>
                <li class="page_item page-item-53"><a href="?page_id=53">Care in Bathing</a></li>
            </ul>
        </li>
        <li class="page_item page-item-27"><a href="?page_id=27">Blog</a></li>
        <li class="page_item page-item-29"><a href="?page_id=29">Get In Touch</a></li>
    </div>

这是我的JS：

$( ".mobilenav li.parent" ).click(function(event) {
        if($(this).hasClass('page_item_has_children')){
            event.preventDefault( );
            $(this).addClass('current_page_item');
            $(this).find('.children').slideToggle("fast");
        }
    });

上面有什么我遗失的东西吗？

Answer 1

在儿童中点击您必须使用 stopPropagation() 来停止事件冒泡

$( ".mobilenav li.parent .children" ).click(function(e){
  e.stopPropagation();

});

Answer 2

我想你想要这个：

$('.mobilenav li.parent > a').click(function(e) {
    e.preventDefault();
});

＆gt;仅匹配上一个标记的直接子项。

这肯定有用：

$('.mobilenav li.parent').on('click', "a", function(e) {
    e.preventDefault();
});

javascript preventDefault仅适用于父项

2 个答案: