Question

我不太擅长JS，我需要一些帮助

我正在尝试用Icon作为触发器制作手风琴菜单。图标应切换为（打开 - /关闭+）。我通过将类“active”切换到触发器来实现它。

HTML：

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

但问题是我无法弄明白如何让它正常工作。当我点击不活动菜单时，活动正在关闭，但图标不会改变。

谢谢， Serghey

解决：

$(".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：已更新。

jQuery Accordion菜单 - 切换图标触发器

1 个答案: