Question

当点击列表元素（例如列表1）时，我首先要显示列表，它应该显示与之相关的段落当点击另一个列表元素（例如列表2）时，它应该再次隐藏与前一个元素相关的前一段并显示与该列表元素相关的段落（列表2）。该段可以在另一个div中提前谢谢。

<div>
<ul>
<li class="servicelist">List 1</li>
<p class="servicepara">Paragraph of list 1</p>
<li class="servicelist">List 2</li>
<p class="servicepara">Paragraph of list 2</p>
<li class="servicelist">List 3</li>
<p class="servicepara">Paragraph of list 3</p>
</ul>
</div>

Answer 1

您需要尝试使用jQuery

<强> HTML

<ul>
  <li> List 1  <p>Paragraph of list 1</p>  </li>
  <li>List 2  <p>Paragraph of list 2</p> </li>
  <li>List 3<p>Paragraph of list 3</p></li>
</ul>

<强> Jquery的

$("p").hide();
$("li").click(function(){
  $("p").hide();
  $(this).children("p").show();  
});

<强> DEMO

Answer 2

首先你需要纠正你的标记，因为li和ul没有正确关闭，见下面的html：

<div>
   <ul>
    <li>List 1</li>
    <p>Paragraph of list 1</p>
    <li>List 2</li>
    <p>Paragraph of list 2</p>
    <li>List 3</li>
    <p>Paragraph of list 3</p>
   </ul>
</div>

试试这个

$(document).ready(function(){
  $("p").hide();
  $("ul li").click(function(){
      $(this).siblings("p").hide();
      $(this).next().show();
  });
});

工作JSFiddle

如更新的问题所述，有多个div。所以要目标

<li class="servicelist">List 1</li>
<p class="servicepara">Paragraph of list 1</p>

您可以使用以下代码：

$(document).ready(function(){
      $("p.servicepara").hide();
      $("li.servicelist").click(function(){
          $(this).siblings("p.servicepara").hide();
          $(this).next().show();
      });
    });

使用Demo了解更新的代码

Answer 3

在许多浏览器中，您可以通过（ab）使用<label>和<input>元素以及:checked选择器来实现此功能。

给出以下HTML：

<div>
    <ul>
        <li><label for="li1">List 1</label><input type="checkbox" id="li1" />
            <p>Paragraph of list 1</p>
        </li>
        <li><label for="li2">List 2</label><input type="checkbox" id="li2" />
            <p>Paragraph of list 2</p>
        </li>
        <li><label for="li3">List 3</label><input type="checkbox" id="li3" />
            <p>Paragraph of list 3</p>
        </li>
    </ul>
</div>

可以显示多个<p>元素（使用<input type="checkbox" />：

li input[type=checkbox] {
    width: 0;
    height: 0;
}

li p {
    display: none;
}

li input:checked ~ p {
    display: block;
}

JS Fiddle demo

或者，使用<input type="radio" />，只能显示一个（最多）<p>元素：

<div>
    <ul>
        <li><label for="li1">List 1</label><input name="pToggle" type="radio" id="li1" />
            <p>Paragraph of list 1</p>
        </li>
        <li><label for="li2">List 2</label><input name="pToggle" type="radio" id="li2" />
            <p>Paragraph of list 2</p>
        </li>
        <li><label for="li3">List 3</label><input name="pToggle" type="radio" id="li3" />
            <p>Paragraph of list 3</p>
        </li>
    </ul>
</div>

使用CSS：

li input[type=radio] {
    width: 0;
    height: 0;
}

li p {
    display: none;
}

li input:checked ~ p {
    display: block;
}

JS Fiddle demo

参考文献：

如何列出列表元素但隐藏段落并仅在单击列表元素时显示？

3 个答案: