Je suis nouveau dans la programmation et j'espère que vous m'aiderez. Je souhaite modifier la couleur d'arrière-plan de class="menu a" lorsque l'événement est cliqué. submenu li a.

Code:-

$(document).ready(function(){
  $(".menu").click(function(){
    $(".submenu").hide();
    $(this).children().show();
    });
    $(".submenu li a").click(function(){
    $(".submenu li a").css("color","blue");
    $(this).css("color","red");
    $(this).parent(".menu a").css({"background": "green"});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu"><a href="#">link 1</a>
    <ul class="submenu">
      <li><a href="#">inlink 1</a></li>
      <li><a href="#">inlink 2</a></li>

    </ul>
  </li>
  <li class="menu"><a href="#">link 2</a>
    <ul class="submenu">
      <li><a href="#">inlink 1</a></li>
      <li><a href="#">inlink 2</a></li>

    </ul>
  </li>

</ul>
1
Varun Sharma 12 avril 2018 à 21:23

4 réponses

Meilleure réponse

1. Vous devez utiliser .closest (), car menu n'est pas un parent direct de submenu li

2. Lors du submenu li clic, supprimez d'abord la couleur d'arrière-plan des autres menu a, puis ajoutez la couleur d'arrière-plan au parent cliqué actuel menu a

Extrait de travail: -

$(document).ready(function(){
  $(".menu").click(function(){
    $(".submenu").hide();
    $(this).children().show();
  });
  $(".submenu li a").click(function(){
   $('.menu').children("a").css({"background": "white"});
    $(".submenu li a").css("color","blue");
    $(this).css("color","red");
    $(this).closest(".menu").children("a").css({"background": "green"});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu"><a href="#">link 1</a>
    <ul class="submenu">
      <li><a href="#">inlink 1</a></li>
      <li><a href="#">inlink 2</a></li>
    </ul>
  </li>
  <li class="menu"><a href="#">link 2</a>
    <ul class="submenu">
      <li><a href="#">inlink 1</a></li>
      <li><a href="#">inlink 2</a></li>
    </ul>
  </li>
</ul>
0
Anant Singh---Alive to Die 12 avril 2018 à 18:40

Il semble que vous essayez d'utiliser ceci:

$(this).parent('.menu a')

Le problème est que .menu a n'est pas son parent. Seul .menu l'est. a est un enfant de .menu (comme un oncle de .submenu li;)).

Utilisez plutôt:

$(this).parent('.menu').children('a')

Vous trouvez d'abord le parent .menu, puis trouvez son enfant direct a. children() (par opposition à find()) garantira que vous n'obtiendrez que l'enfant direct, pas ceux qui sont en panne dans .submenu.

0
samanime 12 avril 2018 à 18:26

Vous pouvez le faire en utilisant le plus proche ()

$($(this).closest(".menu a").css({"background": "green"});
0
John Wink 12 avril 2018 à 18:29

Utilisez closest au lieu de parent

$(this).closest(".menu").find("a").css({"background": "green"});

0
XPX-Gloom 12 avril 2018 à 18:29