Dropdown-Menü schließt nicht?

Question

Ich kodiere ein sehr einfaches Menü in JQuery. Meine Grundidee ist, dass wenn ich auf eine Schaltfläche klicke, ich möchte, dass mein Menü erscheint. Wenn dieses Menü erscheint, passieren zwei Dinge: 1) das Menü wird angezeigt, und 2) die Schaltfläche erhält eine neue Klasse, um schließen zu können. Es ist so, als würde JQuery diese neue Klasse komplett ignorieren. Was soll?

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

so das Problem ist, wenn Sie das tun $(".close-dropdown").click(function() {

kein .close-dropdown im Dom ist das Ereignis Zuhörer zu befestigen, so dass, wenn nach einiger Zeit die Klasse anhängen close-dropdown zu div gibt es keinen Event-Listener.

dies ist ein bekanntes Problem und eine Lösung ist event delegation

darüber lesen Sie mehr hier ... https://learn.jquery.com/events/event-delegation/

i Ereignis Body-Tag übertragen haben, aber Sie können dafür entscheiden, nachdem die Delegation das Verständnis

$('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

Fügen Sie nicht und oder Klassen löschen. Der Javascript-Code muss initialisiert werden, wenn das Dokument fertig ist.

Wenn Sie .addClass() verwenden oder die zugeordnete Klasse löschen, wird sie nicht neu initialisiert, ohne die Seite neu zu laden.

Ihr Code verwendet:

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

Answer 3

Ich würde lieber 1 Funktion verwenden, um dies anstelle von 2 zu handhaben. Überprüfen Sie meine 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

Verwenden jQuery-Syntax mit .on() Ereignis Delegation statt .click() zu verwenden. Wenn Sie .click() verwenden und die Klasse dropdown hinzufügen und entfernen, gehen Ihre Bindungen verloren.

$("#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>