Javascript 用href="；单击下拉菜单#“导航”；使用doubletaptogo.js会导致页面跳转

我有一个使用

doubletaptogo.js

的下拉导航的响应页面，问题是当我点击

#nav

链接显示下拉项目时，这会导致页面向下滚动

，
菜单现在位于页面的
顶部

以下是网页：

我发现，当我
删除所有
导航下的内容时，这个问题是固定的，但这显然不是一个选项。我不熟悉
javascript
，这让我陷入了困境，有什么想法吗

示例代码：

<nav id="nav" role="navigation"> 
   <a href="#nav" title="show menu" class="menu-button">
      <img src="img/menu.png" alt="menu icon">
   </a> 
   <a href="#" title="hide menu" class="menu-button">
     <img src="img/menu.png" alt="menu icon">
   </a> 
   <ul> 
      <li class="active">
         <a href="goligraphist.com.au/development">Home</a>
      </li>
      <li>
       <a href="#">Portfolio</a>
     </li> 
     <li> 
       <a href="#">Contact</a>
     </li> 
   </ul> 
 </nav>

<script src="js/doubletaptogo.js"></script> 
<script> 
  $( function() { 
      $( '#nav li:has(ul)' ).doubleTapToGo(); 
  }); 
</script>











jQuery脚本：

<nav id="nav" role="navigation"> 
   <a href="#nav" title="show menu" class="menu-button">
      <img src="img/menu.png" alt="menu icon">
   </a> 
   <a href="#" title="hide menu" class="menu-button">
     <img src="img/menu.png" alt="menu icon">
   </a> 
   <ul> 
      <li class="active">
         <a href="goligraphist.com.au/development">Home</a>
      </li>
      <li>
       <a href="#">Portfolio</a>
     </li> 
     <li> 
       <a href="#">Contact</a>
     </li> 
   </ul> 
 </nav>

<script src="js/doubletaptogo.js"></script> 
<script> 
  $( function() { 
      $( '#nav li:has(ul)' ).doubleTapToGo(); 
  }); 
</script>


$（函数（）{
$（'#nav li:has（ul）'）。doubleTapToGo（）；
}); 
将以下代码放在DOM ready中可以防止页面跳转：

$('[href^=\\#]').on('click', function(event){
     event.stopPropagation();
});

您可以调用
void（0）
获取以下链接：

<a href="javascript:void(0)">Clickc heere 1</a>

我能看出问题所在。。您已经在主站点图像下的页面下方定义了导航，您是否尝试将其移动到页面顶部，使其默认位于此位置

您也尝试过其他方法吗？我使用bootstrap实现了同样的效果：

<nav id="Navbar" class="navbar navbar-fixed-top navbar-inverse" role="navigation" >

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="define-spinner">

            </div>
            <a class="homeLogo" href="#/"><i class="fa fa-home fa-2x icon-color fa-inverse"></i></a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse" role="navigation">
        <ul class="nav navbar-nav">
            <li class="controller">
                <div id="h2Header"><g:message code="default.title" args="[meta(name:'app.name')]"/> </div>

            </li>

         </ul>
         <ul  class="nav navbar-nav navbar-right" >

            <li  class="dropdown controller">
                <a class="dropdown-toggle" role="button" data-toggle="dropdown">
                    <span id="userMessage">
                        <span class="glyphicon glyphicon-user"></span>
                            <g:message code="default.user.label" default="{{user.username}}" />
                        </span>
                        <b class="caret"></b>
                </a>
                <ul class="dropdown-menu dropdown-menu-dark" role="menu">
                    <li>
                        <a class="fa fa-gear icon-color" onclick='window.location.href="#/updateusername"' title="${message(code: 'default.username.update', default: 'Update Username')}">
                            <g:message code="default.username.update"  default="Update Username"/>  
                        </a>
                    </li>
                    <li>
                        <a class="fa fa-gear icon-color" onclick='window.location.href="#/updatepassword"' title="${message(code: 'default.password.update', default: 'Update password')}">
                            <g:message code="default.password.update"  default="Update Password"/>  
                        </a>
                    </li>
                </ul>
            </li>
            <li class="controller">
                <a data-ng-controller='UserCtrl' data-ng-click='logout()' title="${message(code: 'security.signoff.label', default: 'Log out')}">
                    <span class="glyphicon glyphicon-log-out"></span> <g:message code="security.signoff.label" default="Sign Off"/>
                </a>
            </li>



        </ul>
        </div>
    </div>
</nav>


切换导航














好的，我终于明白了。事实证明，doubletaptogo.js只在导航位于页面顶部时才起作用，没有办法解决这个问题；如果导航位于任何其他内容（如页眉等）下方，请忘记使用此脚本，因为它将始终导致导航跳转到页面顶部

我选择了另一个下拉列表，它只使用html和css，不需要js或jquery

有关更新，请参阅

这就结束了一个令人头疼的问题。
我认为正确的方法是在散列（#）之前写完整的URL

PHP:

<?php
  $currentPage = 'http' . ($_SERVER["HTTPS"] && $_SERVER["HTTPS"] != 'off' ? 's' : '') . '://';
  $currentPage .= $_SERVER["HTTP_HOST"] . htmlentities($_SERVER["REQUEST_URI"], ENT_QUOTES);
?>

<a href="http{if $smarty.server.HTTPS}s{/if}://{$smarty.server.HTTP_HOST|cat:$smarty.server.REQUEST_URI|htmlentities:$smarty.const.ENT_QUOTES}#nav" title="show menu" class="menu-button"> .. </a>

<a href="http{if $smarty.server.HTTPS}s{/if}://{$smarty.server.HTTP_HOST|cat:$smarty.server.REQUEST_URI|htmlentities:$smarty.const.ENT_QUOTES}#" title="hide menu" class="menu-button"> .. </a>




我尝试了这个方法，但是它阻止了下拉菜单的工作，是否有一种特殊的方法可以使用它，这样链接仍然可以工作，但是没有页面跳转？请提供一些最小的下拉标记以及它应该如何工作。请替换为event.stopPropagation（）；我使用了这个，但将event.stopPropagation（）与event.preventDefault（）一起更改，使下拉菜单保持工作状态。请共享一些有关链接的代码，您不希望在单击该链接时将其滚动到顶部
Home
导致跳转的特定链接是我正在使用的脚本：$（function（）{$（'nav li:has（ul'））.doubleTapToGo（）；}）；脚本应用于id=“nav”而不是href=“#nav”。我想你可以把href=“javascript:void（0）”放进去，它应该可以像预期的那样工作。只需尝试一次。这没有帮助，因为我仍然需要#nav的href才能下拉到open。查看您提供的链接的源代码后，我在其中找到href=“#”。你不能只使用href=“javascript:void（0）”，因为锚点击事件必须由某个jQuery处理吗？谢谢Vahid，我不喜欢bootstrap，所以我会尝试将导航移到页面顶部。