Есть ли более чистый способ написать этот выпадающий код jQuery?

У меня есть функция jQuery (ниже), которая отлично работает. Это кнопка раскрывающегося списка, которая срабатывает при нажатии. Я ищу способ очистить код и сделать его намного проще. Спасибо.

jQuery

$("#dropbtn1").click(function() {
  $(".dropdown-content1").toggleClass("show-dropdown");
  $(".dropdown-content2, .dropdown-content3").removeClass("show-dropdown");

});

$("#dropbtn2").click(function() {
  $(".dropdown-content2").toggleClass("show-dropdown");
  $(".dropdown-content1, .dropdown-content3").removeClass("show-dropdown");

});

$("#dropbtn3").click(function() {
  $(".dropdown-content3").toggleClass("show-dropdown");
  $(".dropdown-content1, .dropdown-content2").removeClass("show-dropdown");
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "dropdown">
  <li><button id = "dropbtn1" type = "button">Dropdown</button>
    <div class = "menu dropdown-content1">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

  <li><button id = "dropbtn2" type = "button">Dropdown</button>
    <div class = "menu dropdown-content2">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

  <li><button id = "dropbtn3" type = "button">Dropdown</button>
    <div class = "menu dropdown-content3">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

</ul>

проверить мой ответ

— 18.04.2019 17:42

jquery

18.04.2019 17:28

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Добавьте класс к каждой раскрывающейся кнопке и измените код на

<ul class = "dropdown">
  <li><button id = "dropbtn1" type = "button" class = "drop-btn">Dropdown</button>
    <div class = "menu dropdown-content1">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

  <li><button id = "dropbtn2" type = "button" class = "drop-btn">Dropdown</button>
    <div class = "menu dropdown-content2">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

  <li><button id = "dropbtn3" type = "button" class = "drop-btn">Dropdown</button>
    <div class = "menu dropdown-content3">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

</ul>

и тогда вы можете написать js как

  $(".drop-btn").click (function() {
    $(".menu").hide();
    $(this).siblings('.menu').toggle();
  });

и немного css

.menu{
  display:none;
}

проверьте это рабочий пример

ОБНОВИТЬ

  $(".drop-btn").click (function() {
    $(this).siblings('.menu').toggle();
  });

Удалите $('.menu').hide(), чтобы пользовательское переключение работало в соответствии с вашими требованиями. Проверьте это ОБНОВЛЕННАЯ СКРИПКА

Работает, но я хочу, чтобы пользователь снова нажал кнопку, чтобы включить или выключить детей. В настоящее время мне нужно нажать на другую кнопку, чтобы отключить предыдущую. Надеюсь, это имеет смысл.

— 18.04.2019 17:42

@ user22768 я обновил скрипку. См. этот jsfiddle.net/melvinstanly/uj4oa5rL/8

— 18.04.2019 17:48

@ user22768 Надеюсь, это сработает. Пожалуйста, примите это как ответ.

— 18.04.2019 18:25

Это работает, но у меня одновременно отображаются все три раскрывающихся списка, а это не то, что я хотел. Код @iArcadia ниже делает именно то, что я хочу. Я все еще благодарен за вашу помощь. Спасибо!

— 18.04.2019 18:31

@fridayikon я дал вам код, чтобы открыть одно раскрывающееся меню за раз. Также откройте несколько раскрывающихся списков за раз. Оба не выполнили ваше требование?

— 18.04.2019 19:01

18.04.2019 17:33

При щелчке вы можете удалить класс «show-dropdown» для всех div, у которых есть класс, начинающийся с «dropdown-content» (может быть, вы добавите другой класс, который все они разделяют), а затем переключите «show-dropdown» на текущий связанный узел .

18.04.2019 17:36

Ответ принят как подходящий

Просто добавьте прослушиватель событий в список jQuery, содержащий все ваши кнопки. Затем закройте их родственное меню и откройте соответствующее.

$('.dropdown > li > button').click(function() {
  const jSiblingMenus = $(this).siblings('.menu'),
    isAlreadyOpened = jSiblingMenus.css('display') !== 'none';
  
  $('.dropdown > li > .menu').hide();
  
  (isAlreadyOpened) ? jSiblingMenus.hide() : jSiblingMenus.show();
});

.dropdown > li > .menu {
  display: none;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class = "dropdown">
  <li>
    <button type = "button">Dropdown</button>
    
    <div class = "menu">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

  <li>
    <button type = "button">Dropdown</button>
    
    <div class = "menu">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
  </li>

  <li>
    <button type = "button">Dropdown</button>
    
    <div class = "menu dropdown-content">
      <a href = "#home">Home</a>
      <a href = "#about">About</a>
      <a href = "#contact">Contact</a>
    </div>
    </li>
</ul>

18.04.2019 17:43