0

我有以下带有两个字段集的html。我想为那些包含的字段集提供toggleSlide功能。如果任何不包含id为“contents”的div标签的字段集不滑动。如果有人可以提供 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();
  }
});
4

1 回答 1

2

你可以试试这个： -

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

演示

$("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>
于 2013-05-14T14:41:18.113 回答