Question

我创建了一个列表，并且与列表项并行，我会有不同的段落。（清单第一项 - 第一项，清单第二项，第二项）。

<ul>
   <li>Link One</li>
   <li>Link Two</li>
   <li>Link Three</li>
</ul>

<p>Paragraph One</p>
<p style="display:none">Paragraph Two</p>
<p style="display:none">Paragraph Three</p>

当我点击List Item One时，我想显示第一段，并隐藏其余的段落。我正在使用.index（）来检测单击哪个列表项。

我尝试过使用.not（），但我不确定我是否正确编写代码。

$("ul li" ).on("click", function() {
   var number = $(this).index();

   //Display correspondent P Styles
   $("p").eq(number).show("slow");

   //hide the rest of the p styles   
   $("p").not.($(p).index(number)).hide("slow");

});

JSFiddle在这里。 http://jsfiddle.net/kosherjellyfish/p7C6q/

Answer 1

首先尝试隐藏所有p标记，然后使用获取的索引打开所需的标记，

$("p").hide().eq(number).show("slow");

完整代码，

$( "ul li" ).on("click", function() {
    var number = $(this).index();
    $("p").hide().eq(number).show("slow");
});

DEMO

Answer 2

您可以使用 .siblings() ：

获取匹配元素集中每个元素的兄弟姐妹，可选地由选择器
过滤

$("p").eq(number).show("slow").siblings('p').hide();

<强> Updated Fiddle

Answer 3

您可能希望在此处使用toggle方法：

$("ul li" ).on("click", function() {
   var number = $(this).index();
   //Display correspondent P Styles
   $("p").hide();
   $("p").eq(number).toggle();
});

demo

在jQuery中显示和隐藏不同的元素

3 个答案:

DEMO