0

我有一个有序列表，当单击每个项目时，它将切换显示/隐藏相应的 div 但是，我真的不确定如何以最有效的方式执行此操作。如果我给每个项目一个 id 或类，我知道该怎么做，但我确信如果它是一个大列表，有比编写代码行和代码行更好的方法。

基本上我所拥有的是：

<ol>
  <li id="no1">Money Savings</li>
  <p id="reasonText">
  Some text....
</p>
  <li>Stable Fares</li>
  <p id="reasonText2">
  Some text...</p>
<li>Reason 3</li>
<p id="reasonText3">Some text...</p>

ETC....

查询：

 $("#no1").click(function(){
     $("#reasonText").slideToggle('slow')

有没有更好的方法来遍历每个 li 并显示或隐藏后面的 div，而不是基本上重复我在 jquery 中的内容？

4

2 回答 2

1

使用所有类而不是 id 将是这样做的更好方法：

<ol>
  <li class="reason">Money Savings <p class="reasonText">Some text....</p></li>
  <li class="reason">Stable Fares <p class="reasonText">Some text...</p></li>
  <li class="reason">Reason 3 <p class="reasonText">Some text...</p></li>
</ol>

jQuery 将如下所示：

$('.reasonText').hide(); //hide all the reason text
$('.reason').on('click', function() {
  $(this).children('.reasonText').slideToggle('slow');
});

http://jsfiddle.net/XtUFn/

我将<p>标签移动到<li>标签中，因为<li>标签中只能出现<ol>标签。如果你想保留你的标记，除了将 id 更改为类。

<ol>
  <li class="reason">Money Savings</li>
  <p class="reasonText">Some text....</p>
  <li class="reason">Stable Fares</li>
  <p class="reasonText">Some text...</p>
  <li class="reason">Reason 3</li>
  <p class="reasonText">Some text...</p>
</ol>​

jQuery 将如下所示：

$('.reasonText').hide(); //hide all the reason text
$('.reason').on('click', function() {
  $(this).next('.reasonText').slideToggle('slow');
});​

http://jsfiddle.net/XtUFn/1/

于 2012-12-02T01:58:34.090 回答
1

你可以在这里找到一个例子：

<script>
$(document).ready(function() {
    $("li").click(function(){
     $(this).find("p").slideToggle('slow');
          });
    });
</script>
于 2012-12-02T02:03:47.383 回答