Jquery - запускать подменю при нажатии и закрывать при втором нажатии - PullRequest
Новая
       107

Jquery - запускать подменю при нажатии и закрывать при втором нажатии

0 голосов
/ 04 августа 2020

Я пытаюсь Jquery, кажется, сегодня, и мне пришлось установить подменю, которое запускается только на мобильном телефоне, щелкая по нему. Я нашел способ сделать это! Это работает, но я не могу закрыть его, щелкнув еще раз по родительскому меню.

Ребята, не могли бы вы мне помочь?

Код: 

$('.menu-item-has-children').find('> li').click(function() {
  $('.menu-item-has-children > li').not(this).find('ul').slideUp();
  $(this).find('ul').stop(true, true).slideToggle(400);
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="primary-nav">
  <li class="menu-item menu-item-has-children">
    <a href="#">Parent menu</a>
    <ul class="sub-menu">
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
    </ul>
  </li>
</nav>

Еще раз большое спасибо :)

Ответы [ 2 ]

0 голосов
/ 06 августа 2020

[РАЗРЕШЕНО] Я спросил коллегу на Facebook, и вот код, который сработал: 

$('.menu-item-has-children > a').click(function() {
  //$('.menu-item-has-children > li').not(this).find('ul').slideUp();
  var $submenu = $(this).next('.sub-menu'); 
  $('.sub-menu').not($submenu).slideUp(200); // fermer les autres menus
  $submenu.slideToggle(200); // slideToggle permet d'ouvrir ou fermer, selon l'état
});
.sub-menu {
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="primary-nav">
  <li class="menu-item menu-item-has-children">
    <a href="#">Parent menu</a>
    <ul class="sub-menu">
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
    </ul>
  </li>
  
  <li class="menu-item menu-item-has-children">
    <a href="#">Parent menu</a>
    <ul class="sub-menu">
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation">Contract Negotiation</a></li>
    </ul>
  </li>
</nav>
0 голосов
/ 04 августа 2020

Ваш селектор не подходит перед функцией щелчка.

Это то, что вы хотите? 

$('.menuTrigger').click(function() {
  //$('.menu-item-has-children > li').not(this).find('ul').slideUp();
  $(this).next('ul.sub-menu').stop(true, true).slideToggle(400);
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="primary-nav">
  <li class="menu-item menu-item-has-children">
    <a href="#" class="menuTrigger">Parent menu</a>
    <ul class="sub-menu">
      <li class="menu-item"><a title="Contract Negotiation" href="#">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation" href="#">Contract Negotiation</a></li>
      <li class="menu-item"><a title="Contract Negotiation" href="#">Contract Negotiation</a></li>
    </ul>
  </li>
</nav>
...