Реализация slideToggle в jQuery

Я новичок в jQuery и пытаюсь понять эту функцию slideToggle. Как я хочу, чтобы это работало, когда вы нажимаете, скажем, #toolsnav, div #tool-dropdown скользит вниз, что работает отлично. Но проблема в том, что div #tools-dropdown не поднимается, когда я нажимаю на другие навигационные div, он остается внизу, пока я не нажму на него снова. Спасибо за помощь :)

    <script type="text/javascript">
    $(document).ready(function() {
        $("#toolsnav").click(function() {
            $(".tools-dropdown").slideToggle("fast");              
        }); 
        $("#showsnav").click(function() {
            $(".shows-dropdown").slideToggle("fast");              
        });
        $("#blognav").click(function() {
            $(".blog-dropdown").slideToggle("fast");              
        }); 
        $("#aboutnav").click(function() {
            $(".about-dropdown").slideToggle("fast");              
        });
        $("#joinnav").click(function() {
            $(".join-dropdown").slideToggle("fast");              
        });     
});  
</script> 

                <nav id="main">
                <ul>
                    <li><a href="#" id="toolsnav">Tools</a></li>
                    <li><a href="#" id="showsnav">Shows</a></li>
                    <li><a href="#" id="blognav">Blog</a></li>
                    <li><a href="#" id="aboutnav">About</a></li>
                    <li><a href="#" id="joinnav">Join</a></li>              
                </ul>           
            </nav>

jquery slidetoggle
person davidz    schedule 11.04.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward 

$(document).ready(function() {
    $("#toolsnav, #showsnav, #blognav, #aboutnav, #joinnav").on('click', function() {
        $('[class$="-dropdown"]').not('.'+this.id.replace('nav','')+'-dropdown').slideUp();
        $('.'+this.id.replace('nav','')+'-dropdown').slideToggle();
    });
});

FIDDLE

Чтобы изменить цвет ссылок, когда они активны, вы можете использовать метод jQuery css() или просто использовать класс, например:

$(this).toggleClass('active').parent().siblings().children('a').removeClass('active');

Было бы проще настроить таргетинг на все ссылки, если бы все они имели один и тот же класс, но описанный выше метод также должен работать нормально.

person adeneo    schedule 11.04.2012
comment
Спасибо Аденео! Я думаю, что это решение идеально подходит для того, что я искал :) - person davidz; 11.04.2012
comment
Привет Adeneo, у меня есть быстрый вопрос. Есть ли способ заставить эти навигационные ссылки оставаться определенного цвета, пока они активны? - person davidz; 11.04.2012
comment
@davidz - конечно, смотрите мой обновленный ответ и этот FIDDLE - person adeneo; 11.04.2012

arrow_upward
0
arrow_downward 

$(document).ready(function() {
    $('#main ul li a').click(function(){
        var dropdown = $(this).attr('id').split('nav');
        $('.' + dropdown [0] + '-dropdown').slideToggle('fast'); 
    });
})

Это все :-)

person Андрей Петров    schedule 11.04.2012
comment
К сожалению, это не сработало. Когда я нажимал на другие ссылки, предыдущая никогда не возвращалась. - person davidz; 11.04.2012

arrow_upward
0
arrow_downward

Одним из простых решений является сохранение предыдущего щелкнутого слайда и его переключение.

<script type="text/javascript">
$(document).ready(function() {
    var prevSlide;

        $("#toolsnav").click(slideFunc(".tools-dropdown")); 
        $("#showsnav").click(slideFunc(".shows-dropdown"));
        $("#blognav").click(slideFunc(".blog-dropdown"));
        $("#aboutnav").click(slideFunc(".about-dropdown"));
        $("#joinnav").click(slideFunc(".join-dropdown")); 

    function slideFunc(target)
    {
        return function()
        {
            if(prevSlide && target != prevSlide)
                $(prevSlide).slideToggle("fast");
            else
                prevSlide = null;

            $(target).slideToggle("fast");
            prevSlide = target;
        }
    }
});  
</script> 

<nav id="main">
    <ul>
        <li><a href="#" id="toolsnav">Tools</a></li>
        <li><a href="#" id="showsnav">Shows</a></li>
        <li><a href="#" id="blognav">Blog</a></li>
        <li><a href="#" id="aboutnav">About</a></li>
        <li><a href="#" id="joinnav">Join</a></li>              
    </ul>           
</nav>
person Aram Alipoor    schedule 11.04.2012