javascript - 客户手风琴，不使用jquery ui

Question

我有一个很长的表单，我正在尝试创建一个可点击和可选项卡（FocusOut of last input）手风琴样式效果，它会在隐藏前一个 div 的同时打开下一个 div。下面是html：

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

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

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


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

          });
      });

  </script>

我不能让它为我的生活工作，有没有人看到我做错了什么？

提前谢谢，马克

Answer 1

您在每个hidesfieldset类名以及打开的fieldset标记上都拼错了“ 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();
  }
});