Question

我尝试使用下拉菜单创建一个简单的导航菜单。我设置了数据下拉列表＆＃39;属于＆＃39;打开＆＃39;或者＆＃39;关闭＆＃39;使用jQuery进行晚期CSS使用。我使用＆＃39; Modernizr.touchevents＆＃39;决定悬停/点击行为。这是我的代码：

(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);

现在问题。 A＆＃39; dropdownLink＆＃39;可以有一个有效的href属性（而不是＃）。在这种情况下，我需要它在第二次点击时表现得像它应该的那样。因此，在触摸设备上，第一次单击会打开一个下拉列表，然后第二次将我们发送到URL。

Answer 1

如果我正确理解您的问题（如果没有HTML，它会有点棘手），您只需要进行额外的检查（我已经验证了它，因为我没有＆＃39;得到你的HTML）：

...

dropdownLink.click(function(event) {

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

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

...

因此，如果菜单未打开，它将执行该操作并返回false（从而避免转到URL），然后在第二次单击时，链接将被处理...

添加小提琴：https://jsfiddle.net/fekadgjr/

jQuery下拉菜单点击可点击（在第二次点击）父亲

1 个答案: