jquery - jQuery e.prevent 默认值也适用于子 li

Question

我是 jQuery 的初学者。我创建了自己的下拉列表，问题是当我创建e.preventDefault();下拉列表时它也适用于孩子，我想避免这种情况

html

<div id="wrapper" class="container">
    <nav>
        <ul>
            <li><a href="">ABOUT PGP</a></li>
            <li class="parent"><a href="#">SERVICES</a>
                <ul class="sub-menu">
                    <li><a href="">Overview</a></li>
                    <li><a href="">Industry Expertise</a></li>
                    <li><a href="">Cross-Cultural Expertise</a></li>
                    <li><a href="">Value Proposation</a></li>
                </ul>
            </li>
            <li class="parent"><a href="">TRANSACTIONAL EXPERIENCE</a>
                <ul class="sub-menu">
                    <li><a href="">Select Transactions</a></li>
                    <li><a href="">Prior Transactions</a></li>
                </ul>
            </li>
            <li class="parent"><a href="#">TEAM</a>
                <ul class="sub-menu">
                    <li><a href="index.html">Professionals</a></li>
                    <li><a href="">Board of Directors</a></li>
                    <li><a href="">Advisory Board</a></li>
                </ul>
            </li>
            <li class="parent"><a href="">MEDIA</a>
                <ul class="sub-menu">
                    <li><a href="" class="long">PGP Press Releases & Announcements</a></li>
                    <li><a href="" class="long">PGP In The Newss</a></li>
                </ul>
            </li>
            <li><a href="">STRATEGIC PARTNERS</a></li>
            <li><a href="">CONTACT US</a></li>
        </ul>
    </nav>
</div>

jQuery

<script>
$(function(){
    $('li.parent').bind('click', function(e){
        e.preventDefault();

        $(this).children('ul.sub-menu').fadeIn(800);
    });
}); 
</script>

有人可以给我一个提示我做错了什么吗？

Answer 1

您preventDefault只能像这样在父级上使用。

$('.parent').bind('click', function(e){
    if(event.target.className === 'parent')
        e.preventDefault();     
    $(this).children('ul.sub-menu').fadeIn(800);
});

Answer 2

你可以试试这个：

$('li.parent, li.parent > a').bind('click', function(e){
    e.preventDefault();
    $('ul.sub-menu', this).fadeIn(800);
});

尝试获取直接子>元素并阻止元素的默认操作。

Answer 3

查看 event.target / event.originalTarget 以查看是哪个元素生成了事件并做出相应的响应。

if (e.target.tagName === "LI" || e.target.tagName === "li")
{
  e.preventDefault();
  $(this).children('ul.sub-menu').fadeIn(800);
}