Question

嗨我目前有以下脚本，我正在尝试添加一个显示和隐藏功能，而不是只有一个隐藏并显示它。基本上“点击我”显示它，按钮隐藏它，小提琴示例

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        $(this).next('.below').slideToggle();
        return false;
    });
});

Answer 1

对.below div和slideToggle $(this)执行相同操作：

$('.below').on('click', function(){
    $(this).slideToggle();
});

<强> demo jsFiddle

详细了解slideToggle()

Answer 2

使用slideToggle

$('.below').on('click', function(){
 $(this).slideToggle(); 
});

那将切换显示状态;如果隐藏它将显示，如果显示它将被隐藏

Answer 3

如果您只想要按钮的隐藏功能，则此代码将执行

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        $(this).next('.below').slideToggle();
        return false;
    });
    $('.below').on('click', function(){
        $(this).slideToggle();
    });
});

Demo fiddle：http://jsfiddle.net/9M99G/4/

或者，如果您想在显示隐藏按钮时隐藏Click Me，则下面的代码完全符合

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        $(this).hide();
        $('.below').show();
        return false;
    });
    $('.below').on('click', function () {
        $(this).hide();
        $('.toggleBtn').show();
        return false;
    });

});

Demo fiddle : http://jsfiddle.net/9M99G/6/

Answer 4

<强> DEMO

试试这个，使用slideDown和slideUp

$(document).ready(function () {
      $('.below').hide();
        $('.toggleBtn').click(function () {
            $(this).next('.below').slideDown('slow');
            return false;
        });
         $('.below button').click(function () {
            $(".below").slideUp('slow');
        });
    });

将hide参数添加到脚本中

4 个答案: