У меня есть следующий HTML -
<div id="new_results">
<div class="new_result">
<div class="new_result_header"><h3>Acura ILX</h3></div>
<div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
<ul class="new_trim_values">
<li>4dr Sedan (2.0L 4cyl 5A) </li>
<li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
<li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
</ul>
</div>
</div>
<div class="new_result">
<div class="new_result_header"><h3>Acura ILX Hybrid</h3></div>
<div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
<ul class="new_trim_values">
<li>4dr Sedan (2.0L 4cyl 5A) </li>
<li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
<li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
</ul>
</div>
</div>
<div class="new_result">
<div class="new_result_header"><h3>Acura MDX</h3></div>
<div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
<ul class="new_trim_values">
<li>4dr Sedan (2.0L 4cyl 5A) </li>
<li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
<li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
</ul>
</div>
</div>
</div>
CSS -
.new_result
{
border:1px solid red;
margin-bottom:25px;
}
#new_results .new_trim_values
{
display:none;
}
JQuery -
<script type="text/javascript">
$(document).on("click", ".new_trim_dropdown", function(event){
if($(event.target).is($(this).children()))
{
$(this).children('.new_trim_values').toggle();
$(this).parents(".new_result").siblings(".new_result").children('.new_trim_values').hide();
}
});
</script>
Теперь при запуске все элементы списка скрыты. Когда я нажимаю "Доступные триммеры - 3", то его соответствующие элементы списка будут переключаться, т.е. Показывать и скрывать эффект. Это уже происходит. Но если я нажму на заголовок других скрытых элементов списка - доступные триммеры - 3, то любые предыдущие или следующие отображаемые элементы списка должны быть скрыты. Я использую второй код строки в jquery, но он не работает для меня. Что тут плохого. Plz исправить это. Благодарю.
ДЕМО в JSFiddle
РЕДАКТИРОВАТЬ -
Также я хочу скрыть другой или текущий открытый список, если кто-то щелкнет его - если мы щелкнем любую часть документа, отличную от текущего открытого списка. Как это сделать?
.children()
только спускаются на один уровень в дереве DOM.
В вашем случае .new_trim_values
является потомком .new_result
поэтому вам нужно использовать .find() вместо .children()
:
$(document).on("click", ".new_trim_dropdown", function (event) {
if ($(event.target).is($(this).children())) {
$(this).children('.new_trim_values').toggle();
$(this).parents(".new_result").siblings(".new_result").find('.new_trim_values').hide();
}
});
Я нахожу более практичным, чтобы скрыть все сначала и показать выбранное после этого:
$(document).on("click", ".new_trim_dropdown", function(event){
if($(event.target).is($(this).children()))
{
$('.new_trim_values').hide();
$(this).children('.new_trim_values').toggle();
}
});
".new_trim_values"
является потомком".new_result"
а не прямым потомком.