javascript - 无法使用 parent() 或 closest() 将类添加到父选择器

我知道这非常简单，但我一整天都在编写和重写这个函数但没有成功，希望有人能帮助我。

我有一个 <li class="has-children"> ，当我点击它时，它会检查是否 <ul>这个事件里面的标签有类 is-hidden ，它会删除那个类，我的代码工作得很好。

现在，我想在点击 <li class="go-back"> 时，父级(在这种情况下是 <ul class="sub-menu"> 将再次添加 is-hidden，但它不起作用。我已经使用 console.log 进行调试并且没有错误。我做错了什么？

感谢您的宝贵时间!

Live demo

HTML

<ul id="main-menu" class="main-menu">
    <li><a href="index.html">Home</a></li>

    <li class="has-children">
        <a href="content.html">About</a>

        <ul class="sub-menu is-hidden">
            <li class="go-back"><a href="#">Pricing</a></li>
            <li><a href="#" >Contact Us</a></li>

            <li class="has-children">
                <a href="#">hard goods</a>
                <ul class="sub-menu is-hidden">
                    <li class="go-back"><a href="#">Clothing</a></li>
                    <li><a href="#">Beanies</a></li>
                    <li><a href="#">Watches</a></li>
                    <li><a href="#">Watches</a></li>
                    <li><a href="#">Watches</a></li>
                    <li><a href="#">Watches</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#" >Services</a></li>
    <li><a href="#" >Contact Us</a></li>
</ul>   <!-- end main-menu -->

//open submenu
$('.has-children').on('click', function(event){
    var selected = $(this);
    if( $('.has-children > ul', selected).hasClass('is-hidden') ) {
        $('> a', this).addClass('selected');
        $('> ul', this).removeClass('is-hidden');
        // selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
    }
});

//submenu items - go back link
$('.go-back').on('click', function(){
    $(this).parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('moves-out');
});

最佳答案

答案是代码确实有效。

问题是在代码中添加类“is-hidden”之后 $(this).parent('ul').addClass('is-hidden')..., 这个类被这行删除了 $('> ul', this).removeClass('is-hidden');.

当您点击.go-back 时，.has-children 的点击事件也会触发。关键是添加event.stopPropagation()

$('.has-children').on('click', function(event){
    var selected = $(this);
    if( $('.has-children > ul', selected).hasClass('is-hidden') ) {
        $('> a', this).addClass('selected');
        $('> ul', this).removeClass('is-hidden');
        // selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
    }
});

//submenu items - go back link
$('.go-back').on('click', function(e){
    event.stopPropagation()
    $(this).parent('ul').addClass('is-hidden');
});

.is-hidden {
  display:none;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul id="main-menu" class="main-menu">
    <li><a href="index.html">Home</a></li>

    <li class="has-children">
        <a href="#">About</a>

        <ul class="sub-menu is-hidden">
            <li class="go-back"><a href="#">Pricing</a></li>
            <li><a href="#" >Contact Us</a></li>

            <li class="has-children">
                <a href="#">hard goods</a>
                <ul class="sub-menu is-hidden">
                    <li class="go-back"><a href="#">Clothing</a></li>
                    <li><a href="#">Beanies</a></li>
                    <li><a href="#">Watches</a></li>
                    <li><a href="#">Watches</a></li>
                    <li><a href="#">Watches</a></li>
                    <li><a href="#">Watches</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#" >Services</a></li>
    <li><a href="#" >Contact Us</a></li>
</ul>   <!-- end main-menu -->
</body>
</html>

关于javascript - 无法使用 parent() 或 closest() 将类添加到父选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32183921/

javascript - 无法使用 parent() 或 closest() 将类添加到父选择器

上一篇：css - 如何将 Bootstrap 可折叠导航栏中的 3x 图标栏更改为我自己的汉堡包图标？

下一篇：css - Birt:rptdesign 中的 CSS 条件