Fatal编程技术网
  • javascript/
  • Javascript 如何更改下拉菜单的href

Javascript 如何更改下拉菜单的href

javascript jquery drop-down-menu

Javascript 如何更改下拉菜单的href,javascript,jquery,drop-down-menu,Javascript,Jquery,Drop Down Menu,我有一个下拉菜单，当我点击它打开子菜单，当点击任何地方（也在上面）它关闭。 我希望当此菜单打开时，将href从#更改为自己的页面，当我单击它时，不会关闭菜单，而是打开一个新页面。 对不起，我解释得不好。 这就是我的想法： $('body').on('click',(function(){ $('.dropdown').removeClass('open'); $('.dropdown a').attr('href','#'); $('.dropdo

我有一个下拉菜单，当我点击它打开子菜单，当点击任何地方（也在上面）它关闭。 我希望当此菜单打开时，将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>

  • 

      

    • 第页
      • 

    

    •
    试试下面的代码片段

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

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

    (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);
    让我们看看你的HTMLdosn不起作用。我添加body在“open”类打开后单击以删除该类，但它首先删除该类，而“open”类不会在alluse e.stopPropagation（）处添加<代码>$（'.dropdown'）.on（'click'，函数（e）{e.stopPropagation（）；$（this.addClass（'open'）；}）