单击项目时显示li

Question

我是javascript的初学者。我有一份清单：

<p class="lead">parent item1</p>
<ul class="list bot-2">
    <li><a href="#">child item 1</a>
    </li>
    <li><a href="#">child item 2</a>
    </li>
    <li><a href="#">child item 3</a>
    </li>
</ul>
<p class="lead">parent item2</p>
<ul class="list bot-2">
    <li><a href="#">child item 1</a>
    </li>
    <li><a href="#">child item 2</a>
    </li>
    <li><a href="#">child item 3</a>
    </li>
</ul>
<p class="lead">parent item3</p>
<ul class="list">
    <li><a href="#">child item 1</a>
    </li>
    <li><a href="#">child item 2</a>
    </li>
    <li><a href="#">child item 3</a>
    </li>
</ul>

当一个子项单击时，我需要显示匹配的div，并隐藏其他div，匹配项在这个html结构中：

<ul class="list-services">
    <li class="clearfix"></li>
    <li class="clearfix"></li>
    <li class="clearfix"></li>
</ul>

我如何做到这一点，我看到类似的帖子在堆栈溢出，但它没有类似的结构。

Answer 1

嗯，你可以用这个：

$(".list a").click(function(){
   var x = $(this).parents(".list").children().get();
   var find = $(this).parent().get(0);
   var nth = x.indexOf(find) + 1;
   $(".list-services .clearfix:not(:nth-child(" + nth + "))").hide();
});

http://jsfiddle.net/wumm/v7Ks7/1/

var x = $(this).parents(".list").children().get();获取当前的.list子级。

然后，var find = $(this).parent().get(0); find设置为a所在的li。

现在，nth设置为当前.list中该li的索引。(添加1是因为CSS有一个基于1的索引)

最后一件事:在.list-services中隐藏其他任何东西，然后是.list-services链接

Answer 2

这也可以用普通的javascript来完成，下面是jQuery解决方案：

$('a').on('click', function (event) {
    $('.clearfix').hide();
    $('.clearfix').eq($(this).closest('li').prevAll('li').length).show();
});

$(this).closest('li').prevAll('li').length位通过查找直接的li父项并计算父ul标记中以前的li标记数来给出单击子项的索引。然后，我们只使用eq和show显示带有该索引的eq项。

DEMO