Question

我使用OnClick drop down text with JavaScript and HTML代码制作了下拉隐藏的div项目。但问题是： 1 - 它不会单独打开div，所有的＆＃34;项目＆＃34;立即开放; 2 - 一旦我再次点击它，我就不会再回来了。

我制作了另一行代码以使其上升：

$(function() {
    $(".project").on('click', function() { 
        $(this).parent().find('.details').slideDown();
    });
            $(".project").on('click', function() { 
        $(this).parent().find('.details').slideUp();
    });
});
    $(function() {
    $(".project2").on('click', function() { 
        $(this).parent().find('.details').slideDown();
    });
            $(".project2").on('click', function() { 
        $(this).parent().find('.details').slideUp();
    });
});

依此类推......只要我点击一次，就像动画一样，它会立即上升。它不会停留下来，然后在下一次点击它恢复。并且它仍然分别下降而不是每一个。

Answer 1

如果不需要，您不应经常使用document.ready。

// Shorthand for $( document ).ready()
$(function() {

});

如果你将两个事件绑定到一个元素，..如果你没有停止调整或制作“案例”，它将被执行。

因此，您可以检查可见性并决定要做什么：

$( function () {
    $("[class^='project']").on( 'click', function () {
        var $details = $( this ).parent().find( '.details' );

        if ($details.is(':visible'))
            $( this ).parent().find( '.details' ).slideUp();
        else
            $( this ).parent().find( '.details' ).slideDown();

    });
} );

https://jsfiddle.net/3738Lnmf/

编辑： slideToggle更优雅:)@DiegoLópez

$( function () {
    $("[class^='project']").on( 'click', function () {
        $(this).parent().find('.details').slideToggle();
    });
} );

https://jsfiddle.net/3738Lnmf/1/

Answer 2

如果要在显示和隐藏.slideToggle()元素之间切换

，请使用div

$(function() {
    $(".project").on('click', function() { 
        $(this).parent().find('.details').slideToggle();
    });
    $(".project2").on('click', function() { 
        $(this).parent().find('.details').slideToggle();
    });
});

下拉文字不会再回来，也不会识别其他实例

2 个答案: