JQuery Аккордеонное меню - Переключатель Icon Triger - PullRequest
Новая
       22

JQuery Аккордеонное меню - Переключатель Icon Triger

0 голосов
/ 09 ноября 2011

Я не очень хорош в JS, и мне нужна помощь

Я пытаюсь создать меню для аккордеона, используя Icon в качестве триггера.Значок должен переключиться на (Открыть - / Закрыть +).Я сделал это, переключив класс «активный» на триггер.

Здесь вы можете увидеть в действии http://jsfiddle.net/zbwub/4/

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

Но проблема в том, что я не могу понять, как заставить его работать правильно.Когда я нажимаю на неактивное меню, активное закрывается, но значок не меняется.

Спасибо, Сергей

решено: 

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

1 Ответ

0 голосов
/ 09 ноября 2011

Измените первую функцию следующим образом: 

$(".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: обновлено.

...