Question

我有一个响应式页面，其中包含使用doubletaptogo.js的下拉导航，问题是当我点击#nav链接以显示下拉项目时，这会导致页面显示为scroll down menu现在位于top of the page。

这是页面：http://goligraphist.com.au/development

我发现，当我remove all 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>

jQuery脚本：

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

Answer 1

将以下代码放入DOM中可以阻止您的页面跳转：

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

Answer 2

我可以看到问题在这里..您已经在主站点图像下的页面下方定义了导航，您是否尝试在页面顶部移动它以便默认为这个地方？

你也尝试过替代方案 - 我使用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>

Answer 3

好的，我终于想通了。事实证明，doubletaptogo.js仅在导航位于页面顶部且无法解决时才起作用;如果导航低于任何其他内容，如标题等忘记使用此脚本，因为它将始终导致导航跳转到页面顶部。

我选择了另一种下拉菜单，只需使用html和css，不需要js或jquery。

请参阅http://goligraphist.com.au/development/了解更新。

这是一次重大头痛的结束。

Answer 4

您可以拨打void(0)以获取以下链接：

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

或使用e.preventDefault();

 $('a[href="#"]').click(function(e){
  e.preventDefault();
});

<强> JSFiddle Demo

Answer 5

我认为正确的方法是在哈希（＃）

之前编写完整的URL

<强> PHP：

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

<a href="<?php echo $currentPage; ?>#nav" title="show menu" class="menu-button">

<a href="<?php echo $currentPage; ?>#" title="hide menu" class="menu-button">

<强> Smarty的：

<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>

使用doubletaptogo.js点击href =“＃nav”下拉菜单会导致页面跳转

5 个答案: