JQuery гибкий скрыть / показать наборы полей - PullRequest
Новая
       8

JQuery гибкий скрыть / показать наборы полей

8 голосов
/ 26 ноября 2009

Я хочу улучшить некоторые наборы полей с возможностью показа / скрытия их содержимого после нажатия на ярлык.

В настоящее время HTML выглядит следующим образом: 

<fieldset>
    <legend>Fieldset 1</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>
<fieldset>
    <legend>Fieldset 2</legend>
    <!-- Some input, p, div, whatever -->
</fieldset>

Таким образом, при щелчке одного fieldset legend все, кроме легенды щелчка родительского набора полей, должно переключаться.

Я пытался использовать это: 

$("fieldset *:not(legend)").hide();
$("fieldset legend").click(function(){
    $(this).nextAll().slideToggle();
});

Но он ничего не делает (даже не скрывает содержимое). Конечно, я хочу переключить представление только на том наборе полей, по которому щелкнул пользователь, поэтому он должен каким-то образом определить, какая легенда была нажата, а затем скрыть содержимое соответствующих наборов полей.

Конечно, я мог бы дать им все идентификаторы и написать код для каждого набора полей, но это было бы излишним, поскольку он всегда был бы одинаковым, я думаю, должен быть способ сделать эту функциональность универсальной для любого количества наборов полей. .

У кого-нибудь есть изящная идея?

Ответы [ 3 ]

11 голосов
/ 26 ноября 2009

Если бы я был тобой, я бы обернул содержимое набора полей в 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>

Так что теперь, когда вы нажимаете на ярлык, он перемещает содержимое вверх / вниз и оставляет ваш ярлык видимым.

10 голосов
/ 14 января 2010 
$(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});

Это работает. Это действительно та же самая концепция, только обратная.

3 голосов
/ 08 октября 2013

Расширенная версия

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); } );
    });
});
...