0

JQueryに関しては初心者です。簡単に言うと、「portlet-topper」クラスの 4 つの div があります。各 div には、クラス "portlet-content" の兄弟があります。このコンテンツは、portlet-topper のインスタンスがクリックされるまで非表示になります。クリックすると、兄弟コンテンツが表示されます。次のコードを使用します。

$(".portlet-topper").click(function(e){
    e.preventDefault();
    $(this).siblings(".portlet-content").toggle();
});

クリックする前に明確にするには:

|----portlet-topper-A----|

|----portlet-topper-B----|

A をクリックした後:

|----portlet-topper-A----|

A のポートレット コンテンツ

|----portlet-topper-B----|

B をクリックすると、B のコンテンツが表示され、A も表示されたままになります。A がクリックされた場合、B をクリックすると A を非表示にして B を表示したいのですが、このロジックでコーディングするにはどうすればよいでしょうか。これは、2 つだけでなく、任意の数の div で機能する必要があります。基本的に、一度に表示できるポートレット コンテンツのセットは 1 つだけにしてください。トグルではなく、表示と非表示を明示的に呼び出すと思います。それでも、どこから始めればいいのかよくわかりません...

また、Liferay を使用しているため、各 div のクラスと ID をほとんど制御できません。cssまたはjavascriptしか操作できません

4

4 に答える 4

1

あなたが探している機能は、jQuery UI によって提供されると思います。

デモ: http://jsfiddle.net/SO_AMK/22fWm/

ドキュメント: http://jqueryui.com/demos/accordion/

jQuery:

$(function() {
    $( "#accordion" ).accordion();
});​
于 2012-07-09T16:10:14.190 に答える
1

これを行う必要があると思います：

$(".portlet-topper").click(function(e){ 
    e.preventDefault();
    $(".portlet-content").hide();
    $(this).siblings(".portlet-content").toggle(); 
});

そうしないと、コンテンツを非表示にすることはできません。

于 2012-07-09T16:17:20.667 に答える
0

私が正しく理解していれば、最後にクリックされたポートレットのコンテンツを表示し、残りを非表示にする必要があります。これは、jQueryUIを使用せずにフェイルセーフで実行する方法です。

$(".portlet-topper").click(function(e) {
    $(".portlet-content").hide();
    $(this).find(".portlet-content").show();
});

.portlet-contentの子ではなく兄弟である場合は、の代わりに.portlet-topper使用します。.next().find()

于 2012-07-09T16:11:06.677 に答える
0

クラス「portlet-content」が使用されているページの他の場所はありますか。そうでない場合は、これを行うことができます：

$('portlet-content').toggle();

これにより、そのクラスを持つすべてのコンテンツ領域が切り替わります

于 2012-07-09T16:09:47.560 に答える