3

このコードが機能するのに問題があります.. http://jsfiddle.net/whitewiz/z4fpx/

HTML

<h1 id="flip">Title<h1>
        <div id="panel">
            <p>Description that slides down</p>
        </div>

    <h1 id="flip">Title<h1>
        <div id="panel">
            <p>description that DOESN'T slide down</p>
        </div>

JavaScript

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });   
});

とCSS

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

それらは最初の説明では機能しますが、残りの部分では機能しません。「タイトル」を押すとスライドする #panels が約 18 個ありますが、最初のパネルしか機能しません。

例 - > http://jsfiddle.net/whitewiz/z4fpx/

4

2 に答える 2

4

最初のものは、その ID を持つ DOM の最初の要素であるため機能します。一般に、複数の要素に同じ ID を割り当てることはお勧めできません。代わりに、次のようにクラスを使用します。

HTML:

<h1 class="flip">Title<h1>
<div class="panel">
    <p>Description that slides down</p>
</div>

<h1 class="flip">Title<h1>
<div class="panel">
    <p>description that DOESN'T slide down (but does now)</p>
</div>

CSS:

.panel,.flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
.panel
{
    padding:50px;
    display:none;
}

クリックしたヘッダーに続くパネルのみを展開したいと思います。その場合、クリックされた「フリップ」に続くクラス名「パネル」で最も近い要素を取得する必要があります。

$(document).ready(function(){
    $(".flip").click(function(){
        $(this).next().find(".panel").slideToggle("slow");
    });
});

作業例: http://jsfiddle.net/BBQJy/

于 2013-05-25T16:51:30.133 に答える
0

最初の質問には適切な終了タグが欠けているようで、ナイルの回答でも同じエラーが発生しました。したがって、元のポスターでは機能しませんでした。

Anna Brila の更新された jsfiddle ( http://jsfiddle.net/whitewiz/WuNHz/2 ) に基づくと、考えられる正しい解決策は次のようになります。

  $(".flip").click(function(){
  $flip = $(this);
    $content = $flip.next();
    $content.slideToggle();
  });

これは、ID の代わりにクラスを使用することを前提としています。

完全な動作例: http://jsfiddle.net/wy8gq1bj/1

注: この例で変更した唯一の HTML は<br>、3 番目の の直後の を削除したことです。

于 2016-07-06T05:48:13.523 に答える