Question

我知道这非常容易，但我一直在写这个函数并重写这一功能一整天没有成功，希望有人能帮助我。

我有一个<li class="has-children">，当我点击它时，它会检查此事件的<ul>标记是否包含类is-hidden，它会删除该我的代码工作得非常好。

现在，我想点击<li class="go-back">，父母（在这种情况下为<ul class="sub-menu">会再次添加is-hidden，但它不起作用。我＆＃39 ;使用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 -->

JS

//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');
});

Answer 1

答案是代码实际上有效。

问题在于，在添加了代码后，“隐藏”了这个类＆＃39;在此行$(this).parent('ul').addClass('is-hidden')...中，此类已被此行$('> ul', this).removeClass('is-hidden');删除。

点击.go-back .has-children点击事件也是如此。关键是要添加event.stopPropagation()

＆＃13;

$('.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');
});

＆＃13;

.is-hidden {
  display:none;
}

＆＃13;

<!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>

＆＃13;

无法使用parent（）或nearest（）将类添加到父选择器

1 个答案: