Question

我有一个jQuery代码：onicon onicon切换父类，如果点击之前，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（即，防止它激活所有祖先元素上的click事件）。

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

Answer 2

将js更改为：

$('#icon, #ul > li').on('click', function(e){
    $("#ccontainer")
      or $(this).parent() *not entirely sure what you wanted to get*
    .toggleClass('contact')
    .toggleClass('contactexpand');
});



$('body:not(#icon, #ul > li)').on('click', function(e){
    $('#ccontainer')
    .removeClass('contactexpand')
    .addClass('contact');
});


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

#ul > li指的是所有#item(number) s

jQuery：使用onclick在多个div上更改div的类

2 个答案: