1

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

jQuery(document).ready(function() {
  jQuery('#menu-main .dropdown a').click(function(e) {
    e.preventDefault();
    if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
      jQuery(this).parent().children('.sub-menu:first').hide();
    } else {
      jQuery(this).parent().children('.sub-menu:first').show(); {

      }
    }
  });
});
#menu-main .dropdown .sub-menu {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main">
  <li class="dropdown">
    <a>пункт-1</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-2</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-3</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-4</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>
</ul>

1 ответ 1

1

jQuery(document).ready(function() {
  jQuery('#menu-main .dropdown a').click(function(e) {
    e.preventDefault();
    
    $(".sub-menu").not($(this).parent().children('.sub-menu:first')).hide();
    
    if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
      jQuery(this).parent().children('.sub-menu:first').hide();
    } else {
      jQuery(this).parent().children('.sub-menu:first').show();
    }
  });
});
#menu-main .dropdown .sub-menu {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main">
  <li class="dropdown">
    <a>пункт-1</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-2</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-3</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>

  <li class="dropdown">
    <a>пункт-4</a>
    <ul class="sub-menu">
      <li>
        <a>1</a>
      </li>
      <li>
        <a>2</a>
      </li>
    </ul>
  </li>
</ul>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.