javascript - 下拉文本不会重新出现，也不会识别其他实例

Question

我用了OnClick drop down text with JavaScript and HTML使下拉列表隐藏 div 元素的代码。但问题是:1 - 它不会单独打开 div，所有的“元素”都会同时打开；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() {

});

如果您将两个事件绑定(bind)到一个元素，..如果您不停止 Propergation 或不创建“cases”，它将被执行。

因此您可以检查可见性并决定做什么:

$( 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 更优雅 :) @Diego López

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

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