javascript - 为 jQuery 指定元素

Question

我有一个 <ul>包含 <h2>每个标题下方都有文本。我希望能够通过单击每个标题来显示或隐藏下面的文本。

我怎样才能告诉 jquery 只显示同一 <li> 中的文本？单击标题时没有为每个 <li> 创建单独的 if 语句？

<ul>
    <li>
        <h2>heading</h2>
        <div id='step'>
            text text text
        </div>
    </li>
    <li>
        <h2>heading</h2>
        <div id='step'>
            text text text
        </div>
    </li>
</ul>

<script>
    $("li").click(function () {
        if ($("#step").is(":hidden")) {
            $("#step").slideDown("slow");
        } else {
            $("#step").slideUp("slow");
        }
    });
</script>

Answer 1

首先，您有重复的 ID，这是不正确的。用类或其他标识符替换它们，因为 ID 应该是唯一的。

其次使用$(this) 来引用被点击的元素。

HTML

<ul>
 <li>
  <h2>heading</h2>
  <div class='step'>
   text text text
  </div>
 </li>
 <li>
  <h2>heading</h2>
  <div class='step'>
   text text text
  </div>
 </li>
</ul>

JavaScript

$("li").click(function () {
    $(this).children('.step').slideToggle('slow');
});​

JSFiddle:http://jsfiddle.net/JGZRN/