javascript - jQuery:在多个 div 上使用 onclick 更改 div 的类

Question

我有一个 jQuery 代码:onlick on #icon 切换父类，onclick on body changes 如果之前单击过，则将类改回原样。

我需要的是在点击#item5 或#item4 时发生与点击#icon 相同的事情。

<div id="header_wrap">
    <div id="logo"></div>
    <div class="contact" id="ccontainer">
        <div id="form"></div>
        <div id="icon"><span id="getintouch">GET IN TOUCH</span></div>
    </div>

    <div id="menu_wrap">
        <ul id="menu">
            <li id="item1"><a  href="#">Home</a></li>
            <li id="item2"><a  href="#">About us</a></li>
            <li id="item3"><a  href="#">What we do</a></li>
            <li id="item4"><a  href="#">Portfolio</a></li>
            <li id="item5"><a  href="#">Contact us</a></li>
        </ul>
    </div>
</div>

jQuery 代码....我尝试编写自己的代码来添加功能，但我似乎无法让它工作...对 js/jq 的经验很少。

$('#icon').on('click', function(e){
    $(this).parent()
        .toggleClass('contact')
        .toggleClass('contactexpand');
});

$('body').on('click', function(e){
    $('#ccontainer')
        .removeClass('contactexpand')
        .addClass('contact');
});

$('#ccontainer').on('click', function(e){
    e.stopPropagation();
});

Answer 1

您必须从点击处理程序调用 event.stopPropagation 以防止它在 DOM 中“冒泡”(即，防止它激活所有祖先元素上的点击事件)。

            $(document).ready(function(){
            $('#icon, ul li').on('click', function(event){
                event.stopPropagation();
                $('#icon').parent()
                .toggleClass('contact')
                .toggleClass('contactexpand');               
            });
            $('body').on('click', function(e){

                $('#ccontainer')
                .removeClass('contactexpand')
                .addClass('contact');
            });
        });