1

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

如何告诉 jquery 在<li>单击标题时仅显示同一文本中的文本，而不为每个创建单独的 if 语句<li>？

<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>
4

5 回答 5

2

首先，您有重复的 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/

于 2012-11-13T11:02:37.207 回答
0

问题在于您尝试使用 id 步骤定位一个 div，但有多个具有该 id 的 div。对 div 使用不同的 id

它可以固定如下：

<ul>
 <li>
  <h2>heading</h2>
  <div>
   text text text
  </div>
 </li>
 <li>
  <h2>heading</h2>
  <div>
   text text text
  </div>
 </li>
</ul>​

和js

$("li").click(function () {
    if ($(this).children('div').is(":hidden")) {
        $(this).children('div').slideDown("slow");
    } else {
        $(this).children('div').slideUp("slow");
    }
});​

请注意，在此示例中，它假设您在 li 中仅使用一个 div

于 2012-11-13T11:00:34.493 回答
0

应该这样做 :) $(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>
于 2012-11-13T11:02:06.317 回答
0

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

$("li").click(function () {
     var div = $(this).find(".step");
     if (div.is(":hidden")) {
       div.slideDown("slow");
     } 
     else {
       div.slideUp("slow");
     }
});
于 2012-11-13T11:03:37.640 回答
0

你可以这样做：

html:

<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>​

js：

$('ul li h2').click(function() {
  $('#step').toggle('slow', function() {
   // Animation complete.
  });
});

这里有一个预览小提琴http://jsfiddle.net/wandarkaf/2Pnz7/

希望这会有所帮助。​</p>

于 2012-11-13T11:08:23.483 回答