javascript - jquery 只切换一项

Question

我尝试添加 jQuery 脚本来切换我的页脚列，我的问题是如何停止切换所有项目。现在，当有人点击 H4 标签时，所有 H4 标签都会一起切换。

HTML:

<div class="row footer-cols">
    <div class="col-sm-7 five-three">
        <div class="row">
            <div class="col-sm-4">
                <h4>Information<span class="toggle"></span></h4>
                <div class="footer-cols-content">
                    <ul>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Customer Service</a></li>
                        <li><a href="#">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-4">
                <h4>Why buy from us<span class="toggle"></span></h4>
                <div class="footer-cols-content">
                    <ul>
                        <li><a href="#">Shipping & Returns</a></li>
                        <li><a href="#">Secure Shopping</a></li>
                        <li><a href="#">International Shipping</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

jQuery 脚本

    jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
    jQuery('.footer h4').on("click", function(){
        if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle(); }
        else {
            jQuery(this).find('span').addClass('opened').parents('.footer-cols').find('.footer-cols-content').slideToggle();
        }
    });

Answer 1

您还可以尝试以下代码:

jQuery('.footer .footer-cols h4').append('<span class="toggle"></span>');
    jQuery('.footer-cols h4').on("click", function(){
        if (jQuery(this).find('span').attr('class') == 'toggle opened') { jQuery(this).find('span').removeClass('opened').parent().next().slideToggle();
        }
        else {
            jQuery(this).find('span').addClass('opened').parent().next().slideToggle();
        }
    });

您的选择器的问题在于

parents('.footer-cols')

你基本上选择

<div class="row footer-cols"></div>

元素位于顶部。因此

find('.footer-cols-content')

选择其中的所有子元素，导致所有子元素都变为slideToggle()