Conversion de mon code js en jquery

Bonjour,

Je souhaite convertir mon js en jquery mail il semble qu'il y ai des erreurs. Je vous remercie de votre aide.

$("#btn-sous-menu").click(function(){
    var sous_menu = document.getElementById('ul-sous-menu-mobile');//UL SOUS MENU
    var btn_sous_menu = document.getElementById('btn-sous-menu');//I ICON
    var li_sous_menu = document.getElementById('li-sous-menu-mobile');//LI
    if (sous_menu.style.display == 'none' ||  sous_menu.style.display == '') {
		sous_menu.style.display = 'block';
		li_sous_menu.style.display = 'block';
        btn_sous_menu.innerHTML = "arrow_drop_up";
        }
    else {
		sous_menu.style.display = 'none';
		li_sous_menu.style.display = 'none';
        btn_sous_menu.innerHTML = "arrow_drop_down";
        }
});

Cela fonctionne bien mais si je fais :

$("#btn-sous-menu").click(function(){
    var sous_menu = document.getElementById('ul-sous-menu-mobile');//UL SOUS MENU
    var btn_sous_menu = document.getElementById('btn-sous-menu');//I ICON
    var li_sous_menu = document.getElementById('li-sous-menu-mobile');//LI
    if (sous_menu.css('display') == 'none' ||  sous_menu.css('display') == '') {
		sous_menu.css('display') = 'block';
		li_sous_menu.css('display') = 'block';
        btn_sous_menu.innerHTML = "arrow_drop_up";
        }
    else {
		sous_menu.css('display') = 'none';
		li_sous_menu.css('display') = 'none';
        btn_sous_menu.innerHTML = "arrow_drop_down";
        }
    });

Cela ne fonctionne pas. Je cois que c'est css('display') à la place de .style.display qui ne va pas.
Modifié par barpoix78 (29 Dec 2017 - 12:14)

Bonjour,
déjà je vois aps bien pourquoi transformer en jQuery
Ensuite, quitte à transformer autant tout transformer

$("#btn-sous-menu").click(function(){
    var sous_menu = $('#ul-sous-menu-mobile');//UL SOUS MENU
    var btn_sous_menu = $('#btn-sous-menu');//I ICON
    var li_sous_menu = $('#li-sous-menu-mobile');//LI
    sous_menu.toggle();
    if(sous_menu.is(':visible')){
      btn_sous_menu.html('arrow_drop_down');
   }else{
      btn_sous_menu.html('arrow_drop_up');
  }
});

A titre d'infos

Dans ton code

sous_menu.css('display') = "none" 

Ici deux erreurs : tu mélange javascript et jquery et le .css('display') = "none" n'existe pas. C'est .css("display", "none");

Sois il faut faire

sous_menu.style.display = "none";

en sachant que sous_menu était égale à un document.getElementById (DOM javascript)
Soit il faut faire

$('#ul-sous-menu-mobile').css("display", "none"); 

Modifié par JENCAL (29 Dec 2017 - 12:56)

J'ai fais comme ça et mon menu s'ouvre mais ne se referme pas:

$("#btn-sous-menu").click(function(){
    var sous_menu = $('#ul-sous-menu-mobile');//UL SOUS MENU
    var btn_sous_menu = $('#btn-sous-menu');//I ICON
    var li_sous_menu = $('#li-sous-menu-mobile');//LI
    if (sous_menu.css('display', 'none') ||  sous_menu.css('display', '')) {
 		sous_menu.css('display', 'block');
		li_sous_menu.css('display', 'block');
      	btn_sous_menu.html('arrow_drop_up');
   	}
   else {
		sous_menu.css('display', 'none');
		li_sous_menu.css('display', 'none');
      	btn_sous_menu.html('arrow_drop_down');
  	}

re

Déjà je t'ai donné la solution, et tu ne l'utilises pas... l'as tu testée ??

ensuite
Jencal dit à juste titre que ceci est l'écriture jQuery : sous_menu.css('display', 'none')
en effet c'est une façon de l'écrire, mais ceci ne permet pas de savoir si il est ou non display. Cela assigne un display none à l'élément sous_menu.

Bref !
Si tu veux faire du jQuery, essayes de l'apprendre un peu, sans être méchant
donc
elem.style.display=none se traduit en jQuery par elem.hide() Et en jquery cela permet d'assigner.

quelques liens parce que je dis d'apprendre mais autant te donner les clés

info sur style.display : ici
info sur .hide() : là (c'est la même chose dans l'autre sens pour .show() : par ici

enfin le if avec .is() : encore là avec son sélecteur :visible on fini là


Voilà bonne fin d'année

Merci alos mon slideToggle fonctionne, mais mon icône ne change qu'au déroulement du menu mais pas à l'enroulement:

/*Sous-menu*/
$("#btn-sous-menu").click(function(){
    var sous_menu = $('#ul-sous-menu-mobile');
    var btn_sous_menu = $('#btn-sous-menu');
    var li = $('#li-sous-menu-mobile')
    li.slideToggle(100);
    sous_menu.css('display','block');
    if (sous_menu.css('display','none') || (sous_menu.css('display',''))) {
        btn_sous_menu.html("arrow_drop_up");
        sous_menu.css('display','block');
    }
    else {
        btn_sous_menu.html("arrow_drop_down");
        sous_menu.css('display','none');
    }
});