引导下拉菜单外部链接

Posted 2023-04-13

【中文标题】引导下拉菜单外部链接

【英文标题】：bootstrap dropdown menu external link

【发布时间】：2015-07-06 21:26:55

【问题描述】：

我的带有引导程序的下拉菜单可以使用，但只能使用内部链接。我希望它与外部链接一起使用

www.speleobox.be/test

这是我的代码：

<!-- BEGIN NAVIGATION -->
<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Huur uw... <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="http://www.speleobox.be">Speleobox</a></li>
            <li><a href="http://www.sumopak.be">Sumopakken</a></li>
        </ul>
     </li>
     <li><a href="#experience">Speleobox</a></li>
     <li><a href="#pricing-tables">Prijzen</a></li>
     <li><a href="#contact-us">contact</a></li>
 </ul>
 <!-- END NAVIGATION -->

【参考方案1】：

我看到您有一个自定义代码，可以滚动到代码中的某个锚点。因此，即使对于外部链接，这也可以防止默认的 onclick 事件。

//smooth scroll to href value
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand").click(function(event)
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height())
          dest=$(document).height()-$(window).height();
     else
          dest=$(this.hash).offset().top;
     
     //go to destination
     jQuery('html,body').animate(scrollTop:dest, 1000,'swing');
 );

您可以在开发控制台中看到代码中的错误

Cannot read property 'top' of undefined

我建议删除此代码并将其与此代码交换 https://css-tricks.com/snippets/jquery/smooth-scrolling/

jQuery(function() 
  jQuery('a[href*=#]:not([href=#])').click(function() 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) 
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) 
        jQuery('html,body').animate(
          scrollTop: target.offset().top
        , 1000);
        return false;
      
    
  );
);

这个功能很好用，我用过很多次了。