Выпадающее меню jQuery при щелчке по клику (при втором щелчке) родительский

Question

Я пытаюсь создать простое меню навигации с выпадающими меню. Я установил атрибут «data-dropdown» в «open» или «closed» с jQuery для использования в конце CSS. Я использую «Modernizr.touchevents» для определения поведения наведения/клика. Вот мой код:

(function ($) { 

    "use strict"; 

    var menu = $('.navbar .menu'); 

    // Return early if there's no menu 
    if (! menu) { 
     return; 
    } 

    var dropdownLi = menu.find('.menu-item-has-children'); 
    var dropdownLink = menu.find('.menu-item-has-children > a'); 

    // Return early if there's no dropdown 
    if (! dropdownLi) { 
     return; 
    } 

    // Set attr to all dropdowns by default 
    dropdownLi.attr('data-dropdown', 'closed'); 

    // Use modernizr to decide on touch/hover behaviour 
    if (Modernizr.touchevents) { 

     dropdownLink.click(function(event) { 

      // Set 'data-dropdown' attr to 'opened' 
      $(this).parent().attr('data-dropdown', 'opened'); 

      // Set 'data-dropdown' attr on other submeus to 'closed' 
      $(this).parent().siblings().attr('data-dropdown', 'closed'); 

      // Set 'data-dropdown' attr on other nested subenus to 'closed' 
      $(this).parent().siblings().find('.menu-item-has-children').attr('data-dropdown', 'closed'); 

      // Prevent default click 
      return false; 
      // event.preventDefault(); 
      // event.stopImmediatePropagation(); 

     }); 

     // Close all menus on scroll 
     $('.site-wrapper').scroll(function() { 
      dropdownLi.attr('data-dropdown', 'closed'); 
     }); 

     // Close all dropdowns when clicked anywhere 
     $(document).click(function() { 
      dropdownLi.attr('data-dropdown', 'closed'); 
     }); 

    } else { // Now hover behaviour 

     dropdownLi.each(function() { 

      $(this).mouseenter(function() { 
       $(this).attr('data-dropdown', 'opened'); 
      }); 

      $(this).mouseleave(function() { 
       $(this).attr('data-dropdown', 'closed'); 
      }); 

     }); 

     // Prevent default click if there's just a `#` instead of a link 
     dropdownLink.on('click', function(){ 
      if (this.href.indexOf('#') != -1) { 
       return false; 
       // event.preventDefault(); 
       // event.stopImmediatePropagation(); 
      } 
     }); 

    } 


})(jQuery); 

И теперь проблема. У «dropdownLink» может быть действительный атрибут href (не #). В этом случае мне нужно, чтобы он действовал так, как надо, во втором клике. Итак, в то время как на сенсорном устройстве первый щелчок открывает раскрывающийся список, а второй отправляет нам URL.

Answer 1

Если я правильно понять проблему (это немного сложно без HTML), вы просто просто нужен дополнительный чек, как это (я havn't проверить это, как я не ваш HTML):

... 

dropdownLink.click(function(event) { 

    if($(this).parent().attr('data-dropdown') != 'opened') { 

      // Set 'data-dropdown' attr to 'opened' 
      $(this).parent().attr('data-dropdown', 'opened'); 

... 

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

Добавлено скрипка: https://jsfiddle.net/fekadgjr/