Souci avec slideToggle

Donut
Javascript

Bonjour tout le monde,

Voila j'ai un petit souci un niveau de mon menu en JS et je ne trouve pas la solution.

Voilà mon bout de code HTML (menu) :

<nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.php">Accueil</a></li>
        <li class="dropdown"><a href="#">Page 1<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="#"><i class="fa fa-angle-right"></i> 1</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> 2</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> 3</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> 4</a></li>
            </ul>
        </li>
    </ul>
  </nav>

Mon code JS :

$('li.dropdown').find('.fa-angle-down').each(function(){
  $(this).on('click', function(){
      if( $(window).width() < 768 ) {
      $(this).parent().next().slideToggle();
    }
  return false;
  });
});

Ce code est pour mon menu en responsive tablette et mobile afin qu'il fasse un slideToogle.
Le code fonctionne très bien sauf que j'aimerai au lieu de cliquer sur 'i' (flèche de bas (awesome)) , plutôt cliquer sur mon 'a' tout simplement afin que le sub-menu apparaisse.

Merci de vos réponses.

4 réponses

betaWeb

Salut,

Merci d'afficher ton code correctement, là on ne comprend rien.

jean-smaug

Je ne comprend pas l'utilisation de ton each ? Tu l'as fait dans quel but ? :)

Un lien vers JSfiddle ou tu peux voir la démo : https://jsfiddle.net/the_smaug/ku2Lgm5s/1/

<nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="index.php">Accueil</a></li>
        <li class="dropdown"><a id="test" href="#">Page 1<i class="fa fa-angle-down"></i></a>
            <ul role="menu" class="sub-menu">
                <li><a href="#"><i class="fa fa-angle-right"></i> 1</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> 2</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> 3</a></li>
                <li><a href="#"><i class="fa fa-angle-right"></i> 4</a></li>
            </ul>
        </li>
    </ul>
  </nav>
$('li.dropdown').find('#test').on('click', function(){
  if( $(window).width() < 768 ) {
        $(this).next().slideToggle();
    } 
});
Donut
Auteur

Super, grand merci ça marche impeccable.
Mon each, dans ma tête je voulai bouclé mon fa-angle-down.
Apparemment j'étais pas du tout sur la bonne voie.
Mais grand merci encore :)

jean-smaug

effectivement tu pourrais obtenir un effet visuel un peu diffferent en bouclant sur chacun de tes sous-elements ;) en les faisant disparaitre successivement !

(pense a mettre le sujet en résolu pour ceux qui passeront après :) )