Menu qui ne se ferme pas

barpoi78
Javascript

Bonjour,

Je souhaite ouvrir et fermeer mon menu avec jquery alors pour l'ouvrir, cela fonctionne bien et l'icône add se change bien en l'icône clear seulement, il ne se ferme pas et c'est u niveau de la close else que ça bloque. Comme je n'ai pas d'erreur dans la console, je poste pour vous demander.
Je vos remercie de votre aide.

$(function(){
    $("#openbtn").click(function(){
    $("#mySidenav").css("width","80%");
});
});
$(function(){
    $("#closebtn").click(function(){
    $("#mySidenav").css("width","0");
});
});
if ($("#open1").html = "add") {
    $(function(){
        $("#open1").click(function(){
        $("#mobiles-menu-1").css("display","block");
        $("#open1").html("clear"); 
    });
    });
}
else {
    $(function(){
        $("#open1").click(function(){
        $("#mobiles-menu-1").css("display","none");
        $("#open1").html("add"); 
    });
    });    
}

4 réponses

TokaLazy
Réponse acceptée

Salut

if ($("#open1").html = "add")
La condition ne fonctionnera pas :

  • l'operation de comparaison n'est pas bon. Utilise == ou === (que je ne conseil pas pour ton cas)
  • .html n'existe pas en jQuery, il te faut utiliser .html()
  • .html(), même s'il te retourne quelque chose de viable c'est pas conseillé, utilise plutot .text() pour ne pas avoir de balise html.

N'oublie pas un mantra important en developpement : DRY (don't repeat yourself).
Tu as moyen de faire une bonne refactorisation de ton code pour qu'il soit plus lisible et performent.

Huggy

vérifie ton test d'égalité == ou === mais pas =

barpoi78
Auteur

Merci d'avoir répondu alors j'ai fait comme ça et ça marche bien (je vais voir pour remplacer .html par .text

/*Ouverture menu swipe*/
$(function(){
    $("#openbtn").click(function(){
    $("#mySidenav").css("width","80%");
});
});
$(function(){
    $("#closebtn").click(function(){
    $("#mySidenav").css("width","0");
});
});

/*Ouverture sous menu*/
$(function(){
    $("#open1").click(function ()
        {
        if($('#mobiles-menu-1').css('display')=='none') {
            $("#open1").html("clear");
        }
        else {
            $("#open1").html("add");
        }   
        $( "#mobiles-menu-1" ).slideToggle(250);
    });
});
TokaLazy

Tu as à disposition le selecteur visible (https://api.jquery.com/visible-selector/) pour savoir si ton element est afficher sur le navigateur:

$('#mobiles-menu-1:visible')