ドロップダウンメニューが閉じていませんか？

Question

私はJQueryで非常に基本的なメニューをコーディングしています。私の基本的な考え方は、ボタンをクリックすると、メニューがポップアップしてほしいということです。そのメニューがポップアップすると、1）メニューが表示され、2）ボタンが閉じることができるように新しいクラスが与えられます。 JQueryがこの新しいクラスを完全に無視しているようなものです。何ですか？

http://codepen.io/asilhavy/pen/apjvYo?editors=1010

$(".dropdown").click(function() { 
 
\t $(".drop-item").addClass("show").removeClass("hide"); 
 
\t $(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right"); 
 
\t $(".dropdown").addClass("close-dropdown").removeClass("dropdown"); 
 
}); 
 
$(".close-dropdown").click(function() { 
 
\t $(".drop-item").removeClass("show").addClass("hide"); 
 
\t $(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right"); 
 
\t $(".close-dropdown").removeClass("close-dropdown").addClass("dropdown"); 
 
});

ul { 
 
    list-style: none; 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<script src="https://use.fontawesome.com/f19ebae6ca.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="popup"> 
 
\t <li class="dropdown"><i class="fa fa-drop fa-angle-double-right" aria-hidden="true"></i> Click to Dropdown</li> 
 
\t <li><a href="#" class="drop-item hide">Item 1</a></li> 
 
\t <li><a href="#" class="drop-item hide">Item 2</a></li> 
 
\t <li><a href="#" class="drop-item hide">Item 3</a></li> 
 
\t <li><a href="#" class="drop-item hide">Item 4</a></li> 
 
</ul>

Answer 1

をので、あなたは$(".close-dropdown").click(function() {

を行う際の問題は、そのイベントリスナーを添付するDOMには.close-dropdownはありませんので、いくつかの時間後にあなたがクラスclose-dropdownを添付する場合divには、イベントリスナーはありません。

この

は既知の問題であり、1つの解決策は

event delegationが、ここでそれについての続きを読むです...私はbodyタグにイベントを委任したhttps://learn.jquery.com/events/event-delegation/

ていますが、委任

を理解したことで決めることができます

$('body').on('click', ".dropdown", function() { 
 
    //console.log(2) 
 
\t $(".drop-item").addClass("show").removeClass("hide"); 
 
\t $(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right"); 
 
\t $(".dropdown").addClass("close-dropdown").removeClass("dropdown"); 
 
}) 
 

 

 
$('body').on('click', ".close-dropdown", function() { \t 
 
    //console.log(1) 
 
    $(".drop-item").removeClass("show").addClass("hide"); 
 
\t $(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right"); 
 
\t $(".close-dropdown").removeClass("close-dropdown").addClass("dropdown"); 
 
});

ul { 
 
    list-style: none; 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="popup"> 
 
\t \t \t <li class="dropdown"><i class="fa fa-drop fa-angle-double-right" aria-hidden="true"></i> Click to Dropdown</li> 
 
\t \t \t <li><a href="#" class="drop-item hide">Item 1</a></li> 
 
\t \t \t <li><a href="#" class="drop-item hide">Item 2</a></li> 
 
\t \t \t <li><a href="#" class="drop-item hide">Item 3</a></li> 
 
\t \t \t <li><a href="#" class="drop-item hide">Item 4</a></li> 
 
\t \t </ul>

Answer 2

追加したり、クラスを削除しないでください。 ドキュメントの準備ができたら、JavaScriptコードを初期化する必要があります。

.addClass（）を使用するか、関連するクラスを削除すると、ページを再読み込みせずに再初期化されません。

あなたのコードを使用する：

$('.dropdown').click(function(e){ 
    e.preventDefault(); 
    $('.drop-item').toggle(); 
}) 

Answer 3

私はむしろ2の代わりにこれを処理するために1つの関数を使用したいと思います。私のjsfiddleを確認してください。

var on = false;

$(".toggle").click(function() { 
if(on) { 
    $(".drop-item").removeClass("show").addClass("hide"); 
    $(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right"); 
    on = !on; 
} else { 
    $(".drop-item").addClass("show").removeClass("hide"); 
    $(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right"); 
on = !on; 
} 

}); 

https://jsfiddle.net/yw7ff0wz/

Answer 4

代わり.click()を使用しての.on()でjQueryのイベントの委任構文を使用します。 .click()を使用して、dropdownクラスを追加して削除すると、バインディングは失われます。

$("#popup").on("click", ".dropdown", function() { 
 
\t $(".drop-item").addClass("show").removeClass("hide"); 
 
\t $(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right"); 
 
\t $(".dropdown").addClass("close-dropdown").removeClass("dropdown"); 
 
}); 
 
$("#popup").on("click", ".close-dropdown", function() { 
 
\t $(".drop-item").removeClass("show").addClass("hide"); 
 
\t $(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right"); 
 
\t $(".close-dropdown").removeClass("close-dropdown").addClass("dropdown"); 
 
});

ul { 
 
    list-style: none; 
 
} 
 
.hide { 
 
    display: none; 
 
} 
 
.show { 
 
    display: block; 
 
}

<script src="https://use.fontawesome.com/f19ebae6ca.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="popup"> 
 
\t <li class="dropdown"><i class="fa fa-drop fa-angle-double-right" aria-hidden="true"></i> Click to Dropdown</li> 
 
\t <li><a href="#" class="drop-item hide">Item 1</a></li> 
 
\t <li><a href="#" class="drop-item hide">Item 2</a></li> 
 
\t <li><a href="#" class="drop-item hide">Item 3</a></li> 
 
\t <li><a href="#" class="drop-item hide">Item 4</a></li> 
 
</ul>