SlideToggle ne fonctionne pas

barpoi78
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

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
Auteur

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

salut
essayes avec ça :

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

@plus
Pierre

barpoi78
Auteur

Bonjour,

Non, cela ne fonctionne toujours mais en javascrit comme ceci, ça fonctionne bien:
https://codepen.io/barale61/pen/goROjY

Huggy

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
Auteur

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