jQuery 带有可点击（第二次点击）父项的点击下拉菜单

Question

我正在尝试创建一个带有下拉菜单的简单导航菜单。我将 'data-dropdown' 属性设置为 'opened' 或 'closed' 和 jQuery 以便后期 CSS 使用。我使用 'Modernizr.touchevents' 来决定 hover/click 行为。这是我的代码：

(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 有点棘手），你只需要像这样额外检查（我没有验证它，因为我没有你的HTML):

...

dropdownLink.click(function(event) {

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

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

...

因此，如果菜单未打开，它将执行此操作并且 return false（从而避免转到 URL），然后第二次单击 link 将得到处理...

已添加 fiddle：https://jsfiddle.net/fekadgjr/

jQuery 带有可点击（第二次点击）父项的点击下拉菜单

jQuery dropdown menu on click with clickable(on second click) parent

jquery

click

modernizr

drop-down-menu