javascript - 客户 Accordion ，不使用 jquery ui

Question

我有一个非常长的表格，我试图创建一个可点击和可标记(最后输入的 FocusOut) Accordion 样式效果，它打开下一个 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 结构的原因，但这里有一个工作 fiddle 供你查看和学习。

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