将.click分配给几个相同的类仅适用于单击的元素

Question

我需要分配一个类并在.click上切换一个元素。问题是我有几个具有相同类的元素 - 并且点击将打开所有子容器，其中我只想在点击所在的元素中打开容器。我已经设法只为被点击的元素的子项设置类，但我不能使切换工作。我究竟做错了什么？

小提琴：http://codepen.io/anon/pen/VjevRY

HTML：

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

<div class="container">
 <a class="click">click me</a>
  <div class="sub-container"></div>
</div>

脚本：

$('a.click').click(function() {
 $(this).closest('.container a.click').toggleClass('open');
 $(this).closest('.container .sub-container').slideToggle(600);
});

Answer 1

＆＃13;

＆＃13;

- drilldown: {
               series: [ { 
                   id:'level1',
                   name: 'Level 1',
                   data: [
                       {name: 'Trees', y: 1},
                       {name: 'Plants', y: 2},
                       {name: 'Grass', y: 3},
                       {name: 'Deeper', y: 4, drilldown: 'level2', drilldown: 'level3', drilldown: 'level4' }
                   ] 
               }

＆＃13;

$("a.click").click(function() {
  $(this).toggleClass('open');//use $(this)
  $(this).next(".sub-container").slideToggle(600);//use $(this) and .next()
})

＆＃13;

.sub-container {
    width: 300px;
    height: 300px;
    background: black;
  display:none;
}

＆＃13;

＆＃13;

＆＃13;

1. 使用$（this）获取点击的元素
2. 使用.next（）获取被点击元素的容器