1

私はJavascriptとJQueryを知り始めたばかりで、これを理解することはできません。これにはもっと短い方法がありますか？ 

$(".toggle").click(function(){
$(this).parent().toggleClass("collapsed");
$(this).parent().children().toggleClass("collapsed");
$(this).parent().next(".abcContent").toggle(0);

結局、動作させてよかったのですが、確かにこれは正しく行われていません...子（つまりボタン）を含む親クラス（abcTitle）を切り替えたいと思います。

<div class="abcTitle">
<div class="abcButton toggle"></div>
<h4 class=toggle>Title</h4><div class="sortable"></div>
</div>
<div class="abcContent">Content</div>

私を啓発してくれてありがとう！

明確にするために、ここにいくつかの関連するCSSがあります 

.abcButton {
    background-image:url(minus.png);
}
.abcButton.collapsed {
    background-image:url(plus.png); 
}
.abcTitle {
    border-top-left-radius:14px;
}
.abcTitle.collapsed {
    border-bottom-left-radius:14px;
}

したがって、基本的にabcButtonまたはH4のいずれかをクリックすると、abcButtonとabcTitleの両方にクラス.collapsedが追加されているときに、abcContentの折りたたみがトリガーされることになっています。
（ところで、除外する方法を理解できれば

<div class="sortable"></div>

クリック関数から、abcButtonとh4を分離する必要なしに、abcTitleをクリックハンドラーにすることができます）

4

2 に答える 2

2

jQueryオブジェクトをキャッシュまたはチェーンする必要があります。$(this).parent()3回計算されています。

$(".toggle").click(function(){
    var self = $(this).parent();

    self.toggleClass("collapsed");
    self.children().toggleClass("collapsed");
    self.next(".abcContent").toggle(0);

collapsed子要素にクラスを追加する必要はありません。CSSは、親が折りたたみのクラスを持っているという事実から、要素が折りたたまれていることを理解する必要があります。

div.abcTitle h4 {
    /* Styles when the element is shown */
}

div.abcTitle.collapsed h4 {
    /* Styles when the element is collapsed */
}

次の要素が常にであることが保証できるabcContentので、次の要素の選択について心配する必要はありません。

多数の要素を切り替える場合は、JavaScriptのイベントバブリングメカニズムを利用するdelegateorメソッドを使用することをお勧めします。liveイベントハンドラーは、すべてではなく1つの要素にのみバインドされるため、パフォーマンスが向上します。

以上のことをすべて述べた上で、より良い解決策は次のようになります。

$(document).delegate('.toggle', 'click', function () {
    $(this).parent().toggleClass('collapsed').next().toggle();
});
于 2011-01-19T19:58:35.007 に答える
-1 
$(document).ready(function(){ 

$(".clickclassname").click(function(){ 

$("body").toggleClass("addclassname"); 
}); 

});
于 2018-09-27T10:34:34.167 に答える