2

私はjQueryコードを持っています：#iconのonlickは親クラスを切り替え、bodychangesのonclickは前にクリックされた場合にクラスを元に戻します。

私が必要としているのは、＃iconをクリックしたときと同じように＃item5または＃item4をクリックしたときに同じことが起こるようにすることです。

<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 に答える