jquery - 有特定的按钮隐藏 div

Question

我有一个简单的脚本，我一直在努力寻找一个很好的解决方案。我希望在单击“显示”时显示它。当我点击“隐藏”时让它隐藏。问题是当你点击它时整个 div 会隐藏起来，这不起作用。我想要它，所以只有按钮将它隐藏在隐藏的 div 中。

小提琴：http: //jsfiddle.net/QKJA7/

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

Answer 1

尝试

$(document).ready(function () {
    var content = $('.below').hide();
    $('.toggleBtn').on('click', function () {
        $(this).next('.below').slideToggle();
        return false;
    });
    //register the handler to button element inside .below
    $('.below button').on('click', function () {
        //find the ancestor .below element of the clicked button
        $(this).closest('.below').slideToggle();
    });
});

演示：小提琴

Answer 2

检查这个：http: //jsfiddle.net/QKJA7/1/

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