Блог

Главная - Вопросы по программированию - Есть ли более чистый способ написать этот выпадающий код jQuery?

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

#jquery

#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>

Комментарии:

1. проверьте мой ответ

Ответ №1:

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

 <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() , чтобы пользователь переключал работу в соответствии с вашим требованием. Проверьте эту ОБНОВЛЕННУЮ СКРИПКУ

Комментарии:

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

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

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

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

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

Ответ №2:

Просто добавьте прослушиватель событий в список 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>

Ответ №3:

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

Метки: