Вопросы Теги

Переключатель jQuery (Нажмите, чтобы показать один элемент div и скрыть другие)

Основная идея заключается в том, что у меня есть куча div'ов, каждый из которых можно переключать (показать/скрыть ).

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

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

Просто чтобы прояснить ситуацию, я привел пример, который в настоящее время делает все, что я хочу, за исключением закрытия блока div при открытии другого (Одновременно открывается только один блок div):

$(document).ready(function(){

  $('div.dropdown').each(function() {
    var $dropdown = $(this);

    $("a.dropdown-link", $dropdown).click(function(e) {
      e.preventDefault();
      $("div.dropdown-container", $dropdown).toggle();
      return false;
    });

});
    
  $('html').click(function(){
    $("div.dropdown-container").hide();
  });
     
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-2" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>

<div id="dropdown-3" class="dropdown dropdown-processed">
  <a class="dropdown-link" href="#">Options</a>
  <div class="dropdown-container" style="display: none;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</div>
14
задан YakovL 11 March 2018 в 18:46
поделиться