Question

我现在有了它，当你点击一个+号时，一个滑块随着信息下降。如果用户点击 - 符号，滑块会重新启动，我无法弄清楚如何将其转到哪里。 JSFiddle

这是我正在使用的javascript。

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

        //Set default open/close settings
        $('.acc_container').hide(); //Hide/close all containers

        //On Click
        $('.acc_trigger').click(function () {
            if ($(this).next().is(':hidden')) { //If immediate next container is closed...
                $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
                $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
            }
            return false; //Prevent the browser jump to the link anchor
        });

    });
</script>

这是html

 <h2 class="acc_trigger"><a href="#">Overview</a></h2>
 <div class="acc_container">
    <div class="block"">
        <span id="Content_lblOverview">TEXT HERE
        </span>
    </div>
 </div>

Answer 1

使用slideToggle

替换slideUp / down

此处：http://jsfiddle.net/8nLvh1ez/

    //Set default open/close settings
    $('.acc_container').hide(); //Hide/close all containers

    //On Click
    $('.acc_trigger').click(function () {
        if ($(this).next().is(':hidden')) { //If immediate next container is closed...
            $('.acc_trigger').removeClass('active').next().slideToggle(); //Remove all .acc_trigger classes and slide up the immediate next container
            $(this).toggleClass('active').next().slideToggle(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
        }
        return false; //Prevent the browser jump to the link anchor
    });

Answer 2

Demo - 使用slideToggle()确定活动状态，然后显示或隐藏它。

$(document).ready(function(){
    $('.acc_trigger').click(function(){
        $(this).toggleClass('active').next().slideToggle();
    })
});

如果默认状态为隐藏状态，只需在样式表中添加.acc_container { display: none; }即可。

Answer 3

试试这个。

$('.acc_trigger').on("click",function(event){     
    $(this).toggleClass('active').next().slideToggle();
})

Live Demo

用jQuery .click关闭一个滑块

3 个答案: