html - 子アンカー リンクに影響するアコーディオン リンク

Question

以下はコードデモのリンクです

ここでフィドル

2つの質問があります

1. 最初のアコーディオン I(Link1 | Link 2 | Link 3) のリンクをクリックしてください。
2. また、最初のアコーディオン コンテンツのサブ子 div は出力に表示されません。( <div>This div is not visible in the output</div>)

前もって感謝します。

Answer 1

次のように書きます。

$('.accordion > li > a').click(function(){
        $(this).next().slideToggle("fast");
        $(this).closest('li').toggleClass('active');
    });

の代わりに DIV にクラス名を定義し.accordion div{display:none}ます。次のように書きます。

.accordion .extended{display:none;}

これをチェックしてくださいhttp://jsfiddle.net/zkZN6/2/

Answer 2

Tugkan が言ったように、すべてのリンクが影響を受ける$('.accordion a').click(function(){ため、奇妙な動作をしており、分割に関する限り、プロパティの表示は適用されず、inspect 要素で確認できます。

分割を表示するには、次のようにします。

デモ

style="display:block;"

Answer 3

その理由は、$('.accordion a').click(function(){「accordion」というクラス名の下にあるすべてのタグに影響する JavaScript で定義したためです。「accr1、accr2、accr3 ...など」に固有の別のクラス名を定義し、それらに別のjavascriptを定義する必要があります。