0

jQuery('.hidden_menu .menu-item-27 a').click(function() {
  event.preventDefault();
  if (jQuery('.sub-menu').css('display') == 'none') {
    jQuery('.sub-menu').css('display', 'block');
  } else {
    jQuery('.sub-menu').css('display', 'none');
  }
  if (jQuery('.sub-menu').css('display') == 'block') {
    jQuery('nav .hidden_menu').css('margin-bottom', 665 + 'px');
  } else {
    jQuery('nav .hidden_menu').css('margin-bottom', 400 + 'px');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="order-sm-1">
  <div id="nav-icon3" class="">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="hidden_menu" ">
    <div class="menu-menu-1-container ">
        <ul id="primary-menu-hidden " class="menu ">
            <li id="menu-item-23 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-23 "><a href=" ">Главная</a></li>
                <li id="menu-item-27 " class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-has-children menu-item-27 "><a href=" ">Меню2</a>
                    <ul class="sub-menu ">
                        <li id="menu-item-163 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163 "><a href=" ">Подменю1</a></li>
                        <li id="menu-item-164 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164 "><a href=" ">Подменю2</a></li>
                        <li id="menu-item-165 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165 "><a href=" ">Подменю3</a></li>
                        <li id="menu-item-166 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166 "><a href=" ">Подменю4</a></li>
                        <li id="menu-item-167 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167 "><a href=" ">Подменю5</a></li>
                        <li id="menu-item-168 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168 "><a href=" ">Подменю6</a></li>
                    </ul>
                </li>
            <li id="menu-item-29 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29 "><a href=" ">Меню3</a></li>
            <li id="menu-item-28 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28 "><a href=" ">Меню4</a></li>
            <li id="menu-item-30 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30 "><a href=" ">Меню5</a></li>
            <li id="menu-item-26 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26 "><a href=" ">Меню6</a></li>
            <li id="menu-item-24 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24 "><a href=" ">Меню7</a></li>
        </ul>
    </div>
</ul>

Вопрос: как сделать кликабельным выпадающее меню. На данный момент при клике на любом пункте выпадающего меню происходит "сворачивание" sub-menu. А так же отменить event.preventDefault() у дочерних элементов.

17
  • Посмотрите в сторону closest - сделайте проверку, если клик на меню, значит не сворачиваем.
    – And
    31 окт 2017 в 5:33
  • Вопрос переоткрыл, теперь вы можете написать на него ответ)
    – ЮрийСПб
    31 окт 2017 в 9:56
  • @ЮрийСПб, ай-ай-ай, не надо так :-) верни как было
    – Grundy
    31 окт 2017 в 10:05
  • @Grundy, ТС попросил открыть, говоря, что вопрос не совсем дубль и он хочет ответ написать) По крайней мере в списке связанных вопросов ваша ссылка осталась)
    – ЮрийСПб
    31 окт 2017 в 10:06

2 ответа 2

1

Решил проблему следующим образом:

   jQuery('.hidden_menu .menu-item-27').on('click', 'a', function() {

if (jQuery(event.target.parentNode).parent().hasClass('sub-menu')) {
    event.stopPropagation();
} else {
    event.preventDefault();
    if (jQuery('.sub-menu').css('display') == 'none') {
        jQuery('.sub-menu').css('display', 'block');
    } else {
        jQuery('.sub-menu').css('display', 'none');
    }
    if (jQuery('.sub-menu').css('display') == 'block') {
        jQuery('nav .hidden_menu').css('margin-bottom', 665 + 'px');
    } else {
        jQuery('nav .hidden_menu').css('margin-bottom', 400 + 'px');
    }
}

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="order-sm-1">
  <div id="nav-icon3" class="">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="hidden_menu" ">
    <div class="menu-menu-1-container ">
        <ul id="primary-menu-hidden " class="menu ">
            <li id="menu-item-23 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-23 "><a href=" ">Главная</a></li>
                <li id="menu-item-27 " class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item menu-item-has-children menu-item-27 "><a href=" ">Меню2</a>
                    <ul class="sub-menu ">
                        <li id="menu-item-163 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163 "><a href=" ">Подменю1</a></li>
                        <li id="menu-item-164 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164 "><a href=" ">Подменю2</a></li>
                        <li id="menu-item-165 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165 "><a href=" ">Подменю3</a></li>
                        <li id="menu-item-166 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-166 "><a href=" ">Подменю4</a></li>
                        <li id="menu-item-167 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-167 "><a href=" ">Подменю5</a></li>
                        <li id="menu-item-168 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168 "><a href=" ">Подменю6</a></li>
                    </ul>
                </li>
            <li id="menu-item-29 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29 "><a href=" ">Меню3</a></li>
            <li id="menu-item-28 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28 "><a href=" ">Меню4</a></li>
            <li id="menu-item-30 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30 "><a href=" ">Меню5</a></li>
            <li id="menu-item-26 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26 "><a href=" ">Меню6</a></li>
            <li id="menu-item-24 " class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24 "><a href=" ">Меню7</a></li>
        </ul>
    </div>
</ul>

0

Не очень понятно что у вас происходит. Для начала я бы рекомендовал сделать переключение с помощью метода toggle

  jQuery('.hidden_menu .menu-item-27 a').click(function() {
      event.preventDefault();
      jQuery('.sub-menu').toggle()
  });

А дальше необходимо навешивать дополнительные события и делать те действия, которые вам необходимо.

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