javascript - 如何更改下拉菜单的href

Question

我有一个下拉菜单，当我单击它时打开子菜单，当单击任意位置(也在其上)时它会关闭。我希望当此菜单打开时将 href 从 # 更改为自己的页面，当我单击它时不会关闭菜单，而是打开一个新页面。抱歉解释不好。这就是我的想法:

$('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)。希望这有帮助