javascript - 切换在页面上出现两次的元素

Question

我正在使用一个在页面上出现两次的 html 组件。

我遇到的问题是，当我单击一个组件来切换其内容(如 Accordion )时，两个组件都会同时切换。

如何重写 JS 以在单独单击组件时切换每个组件，而不需要为组件提供不同的类并重写 js 两次？

这就是我到目前为止所拥有的；

var bindEventsToUI = function () {        
        $(".details").click(function(e){
            $(".content").slideToggle("slow", function() {
                $(e.target).hide().siblings().show();
            });
        });
    };

Answer 1

试试这个:

$(".details").click(function(e) {
  $(this).children(".content").slideToggle("slow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='details'>Testing 123
  <div class='content'>> Content 123</div>
</div>
<div class='details'>Testing 456
  <div class='content'>> Content 456</div>
</div>