Question

在联合材料中,我不喜欢,我需要一些帮助。

我试图使Icon成为一种触发因素。 Icon应当改为(Open - / 近+)。我把“活性”类分解成触发器。

可在行动。

传真:

<div class="acc_menu">

    <div class="acc_menu_item">
                <div class="acc_menu_title">                    
                    <h3><a href="#">CAT 1</a></h3>
                    <span class="ico"></span>
                </div>
                <div class="acc_menu_sub">
                    <ul>
                        <li><a href="#">Sub cat 1-1</a></li>
                        <li><a href="#">Sub cat 1-2</a></li>
                        <li><a href="#">Sub cat 1-3</a></li>
                    </ul>
                </div>
    </div>
    <div class="acc_menu_item">
                <div class="acc_menu_title">                   
                    <h3><a href="#">CAT 2</a></h3>
                    <span class="ico"></span>
                </div>
                <div class="acc_menu_sub">
                    <ul>
                        <li><a href="#">Sub cat 2-1</a></li>
                        <li><a href="#">Sub cat 2-2</a></li>
                        <li><a href="#">Sub cat 2-3</a></li>
                    </ul>
                </div>
    </div>

    <div class="acc_menu_item">
                <div class="acc_menu_title">                   
                    <h3><a href="#">CAT 3</a></h3>
                    <span class="ico"></span>
                </div>
                <div class="acc_menu_sub">
                    <ul>
                        <li><a href="#">Sub cat 3-1</a></li>
                        <li><a href="#">Sub cat 3-2</a></li>
                        <li><a href="#">Sub cat 3-3</a></li>
                    </ul>
                </div>
    </div>
</div>

JQuery:

$(".acc_menu_sub").hide();

$(".acc_menu_title .ico").toggle(function(){
        $(this).addClass("active");
}, function () {
        $(this).removeClass("active");
});

$(".acc_menu div div .ico").click(function(){
        if(false == $(this).parent().parent().children(".acc_menu_sub").is( :visible )) {
            $( .acc_menu .acc_menu_sub ).slideUp(300, easeInQuad );
        }        
        $(this).parent().parent().children(".acc_menu_sub").slideToggle(300, easeInQuad );
});

但是,问题在于,我可以说明如何使其工作正确。当我点击不活跃的菜单时,该活动正在关闭,但伊科公司没有变化。

Thanks, Serghey

<<>strong>SOLVED:

$(".acc_menu_sub").hide();     

    $(".acc_menu div div .ico").click(function(){        
        if(false == $(this).parent().parent().children(".acc_menu_sub").is( :visible )) {
            $(".acc_menu div div .ico").removeClass("active");
            $(this).addClass("active");
            $( .acc_menu .acc_menu_sub ).slideUp(300, easeInQuad ).removeClass("active");                
        }        
        $(this).parent().parent().children(".acc_menu_sub").slideToggle(300, easeInQuad );
});

Answer 1

将第一项职能改为:

$(".acc_menu_sub").hide();

$(".acc_menu div div .ico").click(function(){
        $( .acc_menu .acc_menu_item .acc_menu_title .ico.active ).removeClass( active );
        if(false == $(this).parent().parent().children(".acc_menu_sub").is( :visible )) {
            $( .acc_menu .acc_menu_sub ).slideUp(300, easeInQuad );
            $(this).addClass( active );
        }
        $(this).parent().parent().children(".acc_menu_sub").slideToggle(300, easeInQuad );
});

它基本上消除了那里所有积极课堂,然后加上你想要积极课堂。

载于 jsFiddle。

PS:更新。

友情链接