应用错误收集

使用Jquery滑动特定的Fieldset

时间：2013-05-14 14:37:22

标签： jquery

我有以下带有两个字段集的html。我想为那些包含..if的字段集提供toggleSlide功能。如果任何字段集不包含div标签，id为“contents”shud not slide。如果有人可以提供Fiddler，我将不胜感激。

HTML

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Collapse fieldset when legend element clicked</title>  
</head>
<body>
  <fieldset><legend>Awesome</legend>
    <div id="contents">
    <p>
      HELLO THERE
    </p>
    <p>
      Awesome
    </p>
    awesome
    </div>
  </fieldset>
  <br>
  <fieldset><legend>Awesome 2</legend>
    <p>
      HELLO THERE
    </p>
    <p>
      Awesome
    </p>
    awesome
  </fieldset>

</body>
</html>

脚本

$("fieldset legend").click(function() { 
  if ($(this).parent().children().length == 2)
   $(this).siblings().slideToggle("slow");
  else
  {
    $(this).parent().wrapInner("<div>");
    $(this).appendTo($(this).parent().parent());
    $(this).parent().find("div").toggle();
  }
});

1 个答案:

答案 0 :(得分：2)

你可以试试这个： -

我已将id="contents"更改为class="contents"，因为ID必须是唯一的，而且似乎有多个id="contents"会使html无效。如果没有，你可以在点击回调的第一行使用$(this).closest('fieldset').find('#contents').length == 0。

Demo

$("fieldset legend").click(function () {

    if ($(this).closest('fieldset').find('.contents').length == 0) return;
    if ($(this).parent().children().length == 2) $(this).siblings().slideToggle("slow");
    else {
        $(this).parent().wrapInner("<div>");
        $(this).appendTo($(this).parent().parent());
        $(this).parent().find("div").toggle();
    }
});

HTML

<fieldset>
    <legend>Awesome</legend>
    <div class="contents">
        <p>HELLO THERE</p>
        <p>Awesome</p>awesome</div>
</fieldset>
<br>
<fieldset>
    <legend>Awesome 2</legend>
    <p>HELLO THERE</p>
    <p>Awesome</p>awesome</fieldset>