SlideToggle ne fonctionne pas

Par barpoi78, il y a 8 ans

Javascript

Bonjour,

J'essaie tant bien que mal à faire défiler mon sous-menu en passant par jquery mais cela ne marche pas. Je vous remercie de votre aide.

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

Mais slideToggle(); ne fonction pas alors que j'arrive bien à le faire fonctionner sur un paragraphe.

Je sohaite juste que mon menu s'ouvre et se ferme en cliquanr sur btn_sous_menu. J'y arrive en js mais il n'y a pas d'animation comme avec slideToggle

6 réponses

Lartak, il y a 8 ans

Bonsoir.
Tu pourrais par exemple nous montre un peu de code HTML correspondant.
Surtout que tu nous dit que slideToggle ne fonctionne pas, alors que tu ne nous dis pas ce qui se passe exactement, si ça se trouve l'évènement du click ne se déclenche même pas.

barpoi78, il y a 8 ans

Bonsoir,
Je n'ai pas d'erreur dans le débogueur le onclick ne fonctionne pas:

<i id="btn-sous-menu" class="caret material-icons">arrow_drop_down</i> <li id="li-sous-menu-mobile"> <ul id="ul-sous-menu-mobile"> <li><a <?php echo $catalogueDeAaZON;?> href="index.php?page=catalogue_de_a_a_z">De A à Z</a></li> <li><a <?php echo $catalogueParGenreON;?> href="index.php?page=catalogue_par_genre">Par genre</a></li> <li><a <?php echo $rechercheON;?> href="index.php?page=recherche">Recherche avancée</a></li> </ul> </li>

J'ai épuré un peu le code et c'est la premiere icône dont l'ID est "btn-sous-menu" sur laquelle est assigné l'événement click.

et de cette façon, cela fonctionne mais sans slideToggle') qui permet l'animation:

$("#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"; } });
Pierrot01, il y a 8 ans

salut
essayes avec ça :

$("#btn-sous-menu").on('click',function(){

@plus
Pierre

Huggy, il y a 8 ans

apparemment tu utilises la version slim de jquery
avec la version min ça fonctionne sur codepen

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

Attention tu charges jquery.js en plus !!!! -> mis en commentaire

barpoi78, il y a 8 ans

Merci, j'ai fait ça et le slideToggle fonctionne mais mon icône ne change pas (ou seulement la première fois:

/*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'); } });