Question

我有两个同名的元素，其中包含一些隐藏的content。当我点击button时会显示content。

直到这里一切都很完美，现在我想知道当我点击其中一个div时，我hide {另一个content div怎么办？

e.g。如果我点击first button(A)并显示内容，我希望第一个div的内容在click上消失second button(B)。我想保留相同的类名，而不是添加额外的标记或不同的class/ID名称!!

var openAccordionContent = function() {
        var $buttons = $('.accordion-content-button'),
            $content = $('.accordion-content');


        $buttons.each(function() {
            var $button = $(this),
            $content = $button.next('.accordion-content');

            $button.on("click", function(){
                $content.toggleClass('show');
                return false;
            });  

        });
    }();

这是我的fiddle：

Answer 1

可能就是这么简单：

var openAccordionContent = function () {
    $('.accordion-content-button').on('click', function () {
        var $next_content = $(this).next('.accordion-content');

        // Remove the class show from all the items, except the one
        // sitting next to the clicked one.
        $('.accordion-content').not($next_content).removeClass('show');

        // Toggle the class show for the item which is sitting next
        // to the clicked one.
        $next_content.toggleClass('show');
    });
}();

Demo

Answer 2

使用removeClass（除了所选内容之外的所有内容）和toggleClass代替所选内容：

您还可以简化的代码：

$('.accordion-content-button').click(function(){
    var $accord = $(this).next('.accordion-content');
    $('.accordion-content').not($accord).removeClass('show');
    $accord.toggleClass('show');
});

https://jsfiddle.net/vx2bguyp/16/

单击另一个按钮时关闭div

2 个答案: