Question

我有一个下拉菜单，当我点击它打开子菜单，当点击任何地方（也在它上面）它关闭。我希望当这个菜单打开时将#ref从＃更改为自己的页面，当我点击它时，不要关闭菜单而是打开一个新页面。抱歉不好解释。这就是我的想法：

$('body').on('click',(function(){
        $('.dropdown').removeClass('open');
        $('.dropdown a').attr('href','#');
        $('.dropdown a').attr('data-toggle','dropdown');
  });   
$('.dropdown').on('click' ,function(){
    $(this).toggleClass('open');
    $(".open").on("click", function(){
        $('.dropdown a').attr('href','http://example.com');
                $('.dropdown a').removeAttr('data-toggle');
    });
});

我也试过这个但是效果不好

$('body').click(function(evt){
       if(evt.target.class == "dropdown")
          return;
$('.dropdown').toggleClass('open');
    $(".open").on("click", function(){
        $('.dropdown a').attr('href','http://example.com');
        $('.dropdown a').removeAttr('data-toggle');
    });
    if($(evt.target).closest('.dropdown').length)
          return;             
        $('.dropdown').removeClass('open');
        $('.dropdown a').attr('href','#');
        $('.dropdown a').attr('data-toggle','dropdown');
});

这是我的HTML代码：

<li class="menu-item dropdown">
    <a href="#" data-toggle="dropdown">dropdown</a>
    <ul role="menu" class=" dropdown-menu">
        <li class="menu-item">page</li>
    </ul>
</li>

Answer 1

尝试下面的代码段。

    $('body').on('click',(function(){
            $('.dropdown').removeClass('open');
            $('.dropdown a').attr('href','#');
            $('.dropdown a').attr('data-toggle','dropdown');
      });   
    $('.dropdown').on('click' ,function(){
        $(this).addClass('open');     
    });

 $(".dropdown.open").on("click", function(e){
            e.stopPropagation();
            location.href = 'http://example.com';
        });

或者你可以做到

$('.dropdown').on('click' ,function(){
        if($(this).hasClass('open')) 
           location.href = 'http://example.com';  
        else
         $(this).addClass('open');  
    });

如果要在新窗口中打开，请使用window.open（url）。希望这有帮助

Answer 2

我无法解决这个问题，但对于我的情况，我使用悬停进行展开菜单，然后点击打开页面。在移动模式下，我禁用悬停，只需点击

即可展开

(function($) {
    function mediaSize() {
        if (window.matchMedia('(max-width: 767px)').matches) {
        $('.dropdown a').attr('data-toggle','dropdown');
        } else {
            $('.dropdown a').removeAttr('data-toggle');
            $('li.dropdown').mouseover(function(){
                $(this).addClass('open');
            });
            $('li.dropdown').mouseleave(function(){
                $(this).removeClass('open');
            });
        }
    };
  mediaSize();
    window.addEventListener('resize', mediaSize, false);  
})(jQuery);

如何更改下拉菜单的{href

2 个答案: