單擊時如何阻止移動菜單跳轉？

Question

我正在響應式網站中使用以下移動菜單類

http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-sensitive/

它使用以下HTML-

  #nav { width: 60em; /* 1000 */ font-family: 'Open Sans', sans-serif; font-weight: 400; position: absolute; top: 25%; left: 50%; margin-left: -30em; /* 30 480 */ } #nav>span { display: none; } #nav li { position: relative; } #nav li a { color: #fff; display: block; } #nav li a:active { background-color: #c00 !important; } #nav span:after { width: 0; height: 0; border: 0.313em solid transparent; /* 5 */ border-bottom: none; border-top-color: #efa585; content: ''; vertical-align: middle; display: inline-block; position: relative; right: -0.313em; /* 5 */ } /* first level */ #nav>ul { height: 3.75em; /* 60 */ background-color: #e15a1f; } #nav>ul>li { width: 25%; height: 100%; float: left; } #nav>ul>li>a { height: 100%; font-size: 1.5em; /* 24 */ line-height: 2.5em; /* 60 (24) */ text-align: center; } #nav>ul>li:not( :last-child)>a { border-right: 1px solid #cc470d; } #nav>ul>li:hover>a, #nav>ul:not( :hover)>li.active>a { background-color: #cc470d; } /* second level */ #nav li ul { background-color: #cc470d; display: none; position: absolute; top: 100%; } #nav li:hover ul { display: block; left: 0; right: 0; } #nav li:not( :first-child):hover ul { left: -1px; } #nav li ul a { font-size: 1.25em; /* 20 */ border-top: 1px solid #e15a1f; padding: 0.75em; /* 15 (20) */ } #nav li ul li a:hover, #nav li ul:not( :hover) li.active a { background-color: #e15a1f; } @media only screen and ( max-width: 62.5em) /* 1000 */ { #nav { width: 100%; position: static; margin: 0; } } @media only screen and ( max-width: 40em) /* 640 */ { html { font-size: 75%; /* 12 */ } #nav { position: relative; top: auto; left: auto; } #nav>span { width: 3.125em; /* 50 */ height: 3.125em; /* 50 */ text-align: left; text-indent: -9999px; background-color: #e15a1f; position: relative; } #nav>span:before, #nav>span:after { position: absolute; border: 2px solid #fff; top: 35%; left: 25%; right: 25%; content: ''; } #nav>span:after { top: 60%; } #nav:not( :target)>span:first-of-type, #nav:target>span:last-of-type { display: block; } /* first level */ #nav>ul { height: auto; display: none; position: absolute; left: 0; right: 0; } #nav:target>ul { display: block; } #nav>ul>li { width: 100%; float: none; } #nav>ul>li>span { height: auto; text-align: left; padding: 0 0.833em; /* 20 (24) */ } #nav>ul>li:not( :last-child)>span { border-right: none; border-bottom: 1px solid #cc470d; } /* second level */ #nav li ul { position: static; padding: 1.25em; /* 20 */ padding-top: 0; } 

 <nav id="nav" role="navigation"> <span href="#nav" title="Show navigation">Show navigation</span> <span href="#" title="Hide navigation">Hide navigation</span> <ul class="clearfix"> <li><a href="">Home</a></li> <li> <a href="" aria-haspopup="true"><span>Blog</span></a> <ul> <li><a href="">Design</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> <li><a href="">JavaScript</a></li> </ul> </li> <li> <a href="" aria-haspopup="true"><span>Work</span></a> <ul> <li><a href="">Web Design</a></li> <li><a href="">Typography</a></li> <li><a href="">Front-End</a></li> </ul> </li> <li><a href="">About</a></li> </ul> </nav> 

然后，它利用doubletaptogo.js來控制移動設備上的觸摸點擊。

一切看起來都不錯/工作得不錯-除了單擊時瀏覽器跳到#nav元素的頂部這一事實-有點令人討厭-（您可以在此URL http://www.liquidclients.co.uk/landsail中看到/ls4/tester.html （移動屏幕寬度）。

是否有一個很好的跨設備/瀏覽器解決方案可使視口保持原樣，而不是跳轉到#nav錨點？

或者，有人可以推薦更好的響應式菜單解決方案嗎？

Answer 1

試試href =“ javascript：void（0）”代替href =“＃”

Answer 2

如果您使用的是jQuery，請使用以下代碼：

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

現在，這些“＃”鏈接認為它們是ID，因此他們將嘗試跳至頁面的該部分。 由於那里什么都沒有，因此它到達了頂部。

這是帶有附加代碼的小提琴。 我添加了兩個類來使其正常工作。

http://jsfiddle.net/Lb0hwj8p/

$('.nav-show').on('click',function(e){
    e.preventDefault();
    $('.menu').slideToggle();
});