2

我有一个 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();
});
4

2 回答 2

2

您必须从单击处理程序调用 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');
            });
        });
于 2013-03-23T19:11:57.140 回答
0

把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)所有的

于 2013-03-23T19:07:58.230 回答