En pratiquant certains Jquery, j'ai une simple liste non ordonnée que je veux développer lorsque j'appuie sur Entrée. mais seulement celui sur lequel j'appuie n'entre pas tous. Peut-être mal configuré. Pour le moment son expansion des deux articles.

<nav>
<ul>
  <li class="menu"><a href="#">Menu 1</a>
    <ul class="subMenu">
      <li>
        <a href="">Sub Menu 1</a>
      </li>
    </ul>
  </li>
  <li class="menu"><a href="#">Menu 2</a>
    <ul class="subMenu">
      <li>
        <a href="">Sub Menu 1</a>
      </li>
      <li>
        <a href="">Sub Menu 2</a>
      </li>
    </ul>
  </li>
</ul>
$('.menu').keydown(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
    $('ul.subMenu').toggleClass('show');
}
});
2
Daniel Rubio 7 août 2016 à 08:01

3 réponses

Meilleure réponse

Remplacez $('ul.subMenu') par $(this).children('ul.subMenu'). Cela ne recherchera que les enfants de l'élément actuel (pas tous) qui correspondent au sélecteur ul.subMenu (comme vous le souhaitez).

Voir la fonction jQuery children([selector]) pour plus d'informations.

1
Jonathan Lam 7 août 2016 à 05:04

Ce que je fais est de définir une classe CSS .collapse pour réduire chaque ul avec la classe .subMenu dans le li actuellement concentré. Dans le script, une fonction est liée au li à l'aide du sélecteur de classe, qui bascule (ajouter ou supprimer) la classe .collapse avec les ul.

$('.menu').keyup(function(e){ 
    var keyCode = e.keyCode ? e.keyCode : e.which;   
    if(keyCode==13){
        $(this).find('ul.subMenu').toggleClass('collapse');
    }
});
.collapse{
  height:0;  
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
  <li class="menu" autofocus><a href="#">Menu 1</a>
    <ul class="subMenu">
      <li>
        <a href="">Sub Menu 1</a>
      </li>
    </ul>
  </li>
  <li class="menu"><a href="#">Menu 2</a>
    <ul class="subMenu">
      <li>
        <a href="">Sub Menu 1</a>
      </li>
      <li>
        <a href="">Sub Menu 2</a>
      </li>
    </ul>
  </li>
</ul>
0
jonju 7 août 2016 à 05:34

Vous pouvez utiliser ce code ..

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap Demo</title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
              $('.menu').on("click",function(){
                $(this).find(".subMenu").toggle();
                $(this).siblings().find(".subMenu").hide();
              });
            });

        </script>

    </head>
    <body>
        <div class="container">
           <nav>
            <ul>
              <li class="menu "><a href="#">Menu 1</a>
                <ul class="subMenu">
                  <li>
                    <a href="">Sub Menu 1</a>
                  </li>
                </ul>
              </li>
              <li class="menu"><a href="#">Menu 2</a>
                <ul class="subMenu">
                  <li>
                    <a href="">Sub Menu 1</a>
                  </li>
                  <li>
                    <a href="">Sub Menu 2</a>
                  </li>
                </ul>
              </li>
            </ul>
            </nav>
        </div>
    </body>
</html>
0
user6390636user6390636 7 août 2016 à 05:19