Отображение li при нажатии на элемент

Я начинаю работать с javascript. У меня есть этот список:Отображение li при нажатии на элемент

<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, когда один потомок щелкнул, и скрыть другие дивы, соответствующие элементы есть в этой HTML структуры:

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

Как я могу сделать это, я вижу похожие записи в stackoverflow, но у него не было подобной структуры.

источник

2014-02-08 dotfreelancer

Как вы определяете «соответствие DIV»? – idmean

первая ссылка соответствует первому .clearfix – dotfreelancer

ваш html не содержит никакого элемента «div» – hindmost

Ну, вы могли бы использовать это:

$(".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); найти значение li, в котором это было.

А теперь nth присвоен этому значению li в текущем .list. (1 добавляется потому, что CSS имеет индекс отсчитывается с 1)

Последняя вещь: пряча что-нибудь еще, то nth звено в .list-services

источник

2014-02-08 12:57:05 idmean

Как вы могли понять, что требует OP? Мне нужно отобразить соответствующий div'-no 'div' в OP. –

Это может быть сделано с простой 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 родителя и подсчет количества предыдущих li тегов внутри родительского тега ul. Тогда мы просто показать .clearfix элемент с этим индексом, используя eq и show

DEMO

источник

2014-02-08 13:17:28 tewathia

Отображение li при нажатии на элемент

ответ

Смежные вопросы