Jquery slideToggle应该切换列表中的特定列表项

Question

更新

使用此JQuery函数

$(document).ready(function() {
    $(".toggleOne").click(function() {
        $(this).parent().parent().parent().children(".oneContent").slideToggle("slow");
    });
});

我有3个div，每个列表有1个无序列表。我试图实现一个JQuery函数，以便每当我单击按钮（带有toggleOne类）时，与该div相关联的div（带有oneContent类）都应该可见并向下滑动。但是，我的实现无法正常工作。帮助将不胜感激。

JQuery

<script>
$(document).ready(function() {
    $(".toggleOne").click(function() {
      $(".oneContent").slideToggle("slow");
    });
  });
</script>

HTML

<div class="oneDiv">
    <ul class="oneList">
      <li class="oneList_item">
        <h3>ABC</h3>
      </li>
      <li class="oneList_item">
        <button onClick={this.handleChange} class="toggleOne">
          Click Here
        </button>
        <br />
        <br />
      </li>
    </ul>
    <div class="oneContent">
      <h3>Hello World</h3>
    </div>
</div>

<div class="oneDiv">
    <ul class="oneList">
      <li class="oneList_item">
        <h3>ABC</h3>
      </li>
      <li class="oneList_item">
        <button onClick={this.handleChange} class="toggleOne">
          Click Here
        </button>
        <br />
        <br />
      </li>
    </ul>
    <div class="oneContent">
      <h3>Hello World</h3>
    </div>
</div>

<div class="oneDiv">
    <ul class="oneList">
      <li class="oneList_item">
        <h3>ABC</h3>
      </li>
      <li class="oneList_item">
        <button onClick={this.handleChange} class="toggleOne">
          Click Here
        </button>
        <br />
        <br />
      </li>
    </ul>
    <div class="oneContent">
      <h3>Hello World</h3>
    </div>
</div>

CSS

.oneContent {
    display: none;
}

Answer 1

您的嵌套div具有属性“ className”而不是“ class”。将它们更改为类，以便jquery可以访问它们并执行所需的功能。