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/

Answer 2

这应该这样做:) $（this）引用已被点击的列表元素，然后它“找到”它下面的p标签和“slideToggle”，它们根据当前状态向上或向下滑动

<script>
    $(function(){
        $('li').click(function(){
            $(this).find('p').slideToggle();
        });
    });
</script>
<ul>
    <li>
        <h2>heading 1</h2>
        <p>Text text text</p>
    </li>
    <li>
        <h2>heading 2</h2>
        <p>Text text text</p>
    </li>
 </ul>

Answer 3

如果您在div中更改了id="step" class="step"，则可以使用以下代码：

$("li").click(function () {
     var div = $(this).find(".step");
     if (div.is(":hidden")) {
       div.slideDown("slow");
     } 
     else {
       div.slideUp("slow");
     }
});

为jQuery指定元素

3 个答案: