JQuery гибкий скрыть / показать наборы полей
Вопрос
Я хочу улучшить некоторые наборы полей с возможностью показа / скрытия их содержимого после нажатия на ярлык.
В настоящее время HTML выглядит следующим образом:
<fieldset>
<legend>Fieldset 1</legend>
<!-- Some input, p, div, whatever -->
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<!-- Some input, p, div, whatever -->
</fieldset>
Таким образом, при щелчке одной легенда набора полей
все, кроме легенды щелчка родительского набора полей, должно переключаться.
Я пытался использовать это:
$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
$(this).nextAll().slideToggle();
});
Но он ничего не делает (даже не скрывает содержимое в первую очередь). Конечно, я хочу переключить представление только на том наборе полей, по которому щелкнул пользователь, поэтому он должен каким-то образом определить, какая легенда была нажата, а затем скрыть содержимое соответствующих наборов полей.
Конечно, я мог бы дать им все идентификаторы и написать код для каждого набора полей, но это довольно избыточно, поскольку он всегда будет одинаковым, и я думаю, что должен быть способ сделать эту функциональность универсальной для любого количества наборов полей. . р>
У кого-нибудь есть хорошая идея?
Решение
Если бы я был тобой, я бы обернул содержимое набора полей в div, и вот так:
<script type="text/javascript">
$(function(){
$('legend').click(function(){
$(this).parent().find('.content').slideToggle("slow");
});
});
</script>
<fieldset>
<legend>Fieldset 1</legend>
<!-- Some input, p, div, whatever -->
<div class="content">
this<br />
is<br />
content<br />
</div>
</fieldset>
<fieldset>
<legend>Fieldset 2</legend>
<!-- Some input, p, div, whatever -->
<div class="content">
this<br />
is<br />
content<br />
</div>
</fieldset>
Так что теперь, когда вы нажимаете на ярлык, он перемещает содержимое вверх / вниз и оставляет ваш ярлык видимым.
Другие советы
$(function(){
$('legend').click(function(){
$(this).siblings().slideToggle("slow");
});
});
Это работает. На самом деле это та же самая концепция, только обратная.
Расширенная версия
HTML (легенда содержит [-] span):
<fieldset>
<legend>My Area <span>[-]</span></legend>
Content of fieldset...
</fieldset>
JavaScript (требуется jQuery):
$(function(){
// Set cursor to pointer and add click function
$("legend").css("cursor","pointer").click(function(){
var legend = $(this);
var value = $(this).children("span").html();
if(value=="[-]")
value="[+]";
else
value="[-]";
$(this).siblings().slideToggle("slow", function() { legend.children("span").html(value); } );
});
});