0

これが私の状況です：

4つの異なるテーマをカバーするサイトを持っています. それぞれがそれらの主題のタイトルを持つ 4 つの div から始めます。例えば、

<div><p> Physics   </p></div>
<div><p> Chemistry </p></div>
<div><p> Biology   </p></div>
<div><p> Math      </p></div>

「物理」の div をクリックすると、別の div が表示され、物理的な問題か何かについて詳しく説明されます。もう一度クリックすると、「精緻化 div」が消えます。ここで1つの「件名」で作業しています：

http://jsfiddle.net/yfrNn/2/

これは、これを達成するために使用している jQuery コードです。

$(document).ready(function () {
    $(".phys").click(function () {
        if ($(".phys:last").css("visibility") == "visible") {
            $(".phys").css("visibility", "");
        } else {
            $(".phys").css("visibility", "visible");
        }
    });
});`

この関数は、使用しているサブジェクトごとに 1 回ずつ、4 回書くことができますが、よりクリーンなソリューションが必要です。次の方法ですべての div を宣言できるかどうか疑問に思っています。

<div class="subject phys"><p> Physics   </p></div>
<div class="subject chem"><p> Chemistry </p></div>
<div class="subject bio"><p>  Biology   </p></div>
<div class="subject math"><p> Math      </p></div>

次に、「サブジェクト」div がクリックされるたびに特定の click() 関数を実行し、この特定の div が参照しているサブジェクトをコードに認識させ、適切な「詳細 div」を表示します。

私は潜在的にサブクラス化でこれを行うことができると信じています:

/* CSS */
div.subject{}
.subject.phys{}
.subject.chem{}
.subject.bio{}
.subject.math{}

何かご意見は？このようなものを実装するための明らかに良い方法はありますか?

編集

更新されたフィドルは次のとおりです。HTML は大まかに実装されます。

http://jsfiddle.net/yfrNn/6/

4

1 に答える 1

0 
$('.subject').click(function(e){
e.stopPropagation();
e.preventDefault();

//use a specific class name like `insideDiv` for the divs that are inside your main ones instead of div.another below

if ($(this).find('div.another').is(":visible"))
{$(this).find('div.another').hide();}
else
{$(this).find('div.another').show();}
});
于 2013-10-21T20:56:31.727 に答える