0

昨日、各ボタンのクリックで上下するものを作るのに苦労しました。

stackoverflow "j08691" のユーザーのおかげで、この問題は解決されました。ただし、それぞれに応じてコンテンツをフェードインおよびフェードアウトする方法を理解することはできません。

JSフィドル

私を助けてくれたユーザーは、私の質問でこれを見たことがありません。おそらく、他の誰かが私を助けることができます。

CSS と HTML のサンプル要素が fiddle に追加されました。私はそれを機能させる方法がわかりません。

たとえば、フィドルのように、ボタン A、B、C、D があります。

「A」をクリックすると立ち上がり表示されます<div id="letterA">Letter A opened-content.</div>。ボタンAをもう一度クリックすると、再び消えるはずです。（フェードインフェードアウト）。

ボタン「A」がアクティブで、他のボタン B、C、または D がクリックされると、再びボタン A がコンテンツをフェードアウトし、他のクリックされたボタンが表示されます。

説明するのは本当に簡単ですが、それを機能させるのは難しいです。

前もって感謝します。

4

2 に答える 2

2

ここに解決策があります：http://jsfiddle.net/KQ3sq/1/

ただし、マークアップを少し変更する必要がありました。liアイデアは、それぞれをターゲット divにリンクすることです。そのために、HTML5 データ属性を使用しています。対応する div にアンカー付きのリンクを追加することも検討できます (JS がない場合のフォールバック)。

次に、魔法を行うJSは次のとおりです。

var target = $(this).data('target');    
$("#content").children(target).fadeIn().siblings().fadeOut();
于 2012-10-04T15:13:38.633 に答える
0

更新 @MarvinLabs :D

var target = $(this).data('target');    
            $("div#collapseContent").children(target).fadeIn().siblings().fadeOut();
            if($(this).height() != 15 ) $("div#collapseContent").children(target).fadeOut();

それは機能しますが、それで問題ないのか、それとも改善できるのかわかりません。したがって、より良い解決策があれば、回答を更新するか、ここに返信してください;)

乾杯と感謝。

于 2012-10-04T15:56:05.273 に答える