javascript - 将隐藏参数添加到脚本

Question

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

http://jsfiddle.net/9M99G/

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

Answer 1

只需对.belowdiv 和slideToggle它执行相同的操作$(this)：

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

演示 jsFiddle

查看更多关于slideToggle()

Answer 2

如果你只想要按钮的隐藏功能，这段代码就可以了

$(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： //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 3

利用slideToggle

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

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

Answer 4

演示

试试这个，使用 slideDown 和 slideUp

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