0

私は2つのフィールドセットを持つ次のhtmlを持っています..id "contents" shud not slideのdivタグを含まないフィールドセットの場合..を含むフィールドセットにtoggleSlide機能を提供したいと思います. 誰かが 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 は一意である必要があり、HTML が無効になる複数の ID を探しているように見えるため、変更id="contents"しました。そうでない場合は、クリック コールバックの最初の行で使用できます。class="contents"id="contents"$(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 に答える