0

我是 jQuery 的新手，我正在尝试找出这个 slideToggle 函数。我希望它如何工作是当你点击让我们说#toolsnav #tool-dropdown div 向下滑动时，效果很好。但问题是当我单击其他导航 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>
4

3 回答 3

2 
$(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();
    });
});

小提琴

要在链接处于活动状态时更改链接的颜色，您可以使用 jQuery 的 css() 方法，或者只使用一个类，如下所示：

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

如果它们都具有相同的类，则将所有链接作为目标会更容易，但是上述方法也应该可以正常工作。

于 2012-04-11T11:57:37.290 回答
0 
$(document).ready(function() {
    $('#main ul li a').click(function(){
        var dropdown = $(this).attr('id').split('nav');
        $('.' + dropdown [0] + '-dropdown').slideToggle('fast'); 
    });
})

就这样 ：-）

于 2012-04-11T11:30:31.817 回答
0

一个简单的解决方案是保存以前单击的幻灯片并切换它。

<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>
于 2012-04-11T11:33:49.290 回答