jQuery Flexible Hide/Show의 필드 세트

Question

레이블을 클릭하면 내용을 표시 / 숨길 수있는 옵션으로 일부 필드 세트를 향상시키고 싶습니다.

현재 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();
});

그러나 그것은 아무것도하지 않습니다 (처음에는 내용을 숨기지 않습니다). 물론 사용자가 클릭 한 필드 세트에서보기 만 토글하기를 원하므로 어떻게 든 클릭 한 범위를 결정한 다음 해당 필드의 내용을 숨겨야합니다.

물론, 나는 그들에게 모든 ID를 제공하고 모든 필드 세트에 대한 코드를 쓸 수 있지만, 그것은 항상 그것이 항상 동일하다는 것을보고 중복성이 있습니다.

누구든지 깔끔한 아이디어가 있습니까?

Answer 1

내가 당신이라면 나는 Div에서 Fieldset의 내용을 랩핑 할 것입니다.

<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>

따라서 이제 레이블을 클릭하면 콘텐츠가 위/아래로 미끄러지고 레이블을 보이게 만듭니다.

Answer 2

$(function(){
  $('legend').click(function(){
   $(this).siblings().slideToggle("slow");
  });
});

이것은 작동합니다. 그것은 실제로 같은 개념입니다.

Answer 3

확장 버전

html (Legend는 [-] 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); } );
    });
});