jquery ui를 사용하지 않은 고객 아코디언

Question

나는 이전 양식을 숨기면서 다음 div를 여는 클릭 가능한 tabbable (마지막 입력의 FocusOut) 아코디언 스타일 효과를 만들기 위해 노력하고 있습니다.

<form class="common"> 
    <div class="hidesfeildset"> 
    <feildset> 
     <legend>Section Title:</legend> 
      <label><input type="text"/></label> 
       <label><input type="text"/></label> 
    </fieldset> 
    </div> 
    <div class="hidesfeildset"> 
    <feildset> 
     <legend>Section Title:</legend> 
      <label><input type="text"/></label> 
       <label><input type="text"/></label> 
    </fieldset> 
    </div> 
    <div class="hidesfeildset"> 
    <feildset> 
     <legend>Section Title:</legend> 
      <label><input type="text"/></label> 
       <label><input type="text"/></label> 
    </fieldset> 
</form> 

그리고 JS : 아래는 HTML입니다

<script> 
    $(document).ajaxSuccess(function(){ 

     $(".hidesfieldset").hide(); 
     $("legend").bind("click","focusout",function() { 


      $(this).next(".hidesfieldset").toggle(); 

      }); 
     }); 

    </script> 

내가 사람이 내가 잘못하고있는 무슨 보는가,이 내 인생 일 위선적 인 말투? 사전에

감사합니다, 마크

Answer 1

당신은 모든 hidesfieldset 클래스 이름에 "FIELDSET"(feildset되지 않음)뿐만 아니라 개방 필드 셋 태그 철자가. 또한 최종 문을 닫지 않았습니다. hidesfieldset div.

내가 한 html 구조를 선택하는 이유는 묻지 않겠지 만 여기를보고 배우기위한 실제 피들입니다.

http://jsfiddle.net/s4vcX/

// hide all labels (inputs) except for those in the first fieldset 
$("fieldset label").hide(); 
$("fieldset:first label").show(); 

// show when legend is clicked while hiding rest 
$("legend").bind("click", function() { 
    $("fieldset label").not($(this).nextAll("label")).hide(); 
    $(this).nextAll("label").show(); 
}); 


//handle shift-tab on first input of each field set 
$("fieldset").find("input:first").bind("keydown", function (e) { 
    if(e.shiftKey && e.which == 9) { 
    $(this).closest(".hidesfieldset").find("label").hide(); 
    var previous = $(this).closest(".hidesfieldset").prev(".hidesfieldset"); 
    if(previous.length==0) 
     previous = $(this).closest("form").find(".hidesfieldset:last"); 
    previous.find("label").show(); 
    previous.find("input").last().focus(); 
    e.preventDefault(); 
    } 
}); 

//handle tab on last input of each field set 
$("fieldset").find("input:last").bind("keydown", function (e) { 
    if(!e.shiftKey && e.which == 9) { 
    $(this).closest(".hidesfieldset").find("label").hide(); 
    var next = $(this).closest(".hidesfieldset").next(".hidesfieldset"); 
    if(next.length==0) 
     next = $(this).closest("form").find(".hidesfieldset:first"); 
    next.find("label").show(); 
    next.find("input").first().focus(); 
    e.preventDefault(); 
    } 
});