jQuery 유연한 필드 세트 숨기기/표시

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

나는 그런 식으로 사업부에서 필드 셋의 내용을 포장하고 줄 :

<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 (전설 포함 [-] 스팬) :

<fieldset> 
    <legend>My Area <span>[-]</span></legend> 
    Content of fieldset... 
</fieldset> 

자바 스크립트 (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); }); 
    }); 
});