Question

我有一个有序列表，当点击每个项目时，它将切换显示/隐藏相应的div但是，我真的不确定如何在最有效的mannor中执行此操作。如果我给每个项目一个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>

等...

JQuery的：

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

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

Answer 1

您可以找到示例Here：

<script>
$(document).ready(function() {
    $("li").click(function(){
     $(this).find("p").slideToggle('slow');
          });
    });
</script>

Answer 2

使用所有类而不是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/

单击li时显示/隐藏div或p

2 个答案: