HASHTAG HARDSHIPS - 如何在 URL 中不放置主题标签的情况下打开菜单下拉菜单？

Question

所以这是我的问题。假设我有一个菜单栏，当用户通过移动设备点击它时，它应该成为一个下拉菜单。说我也讨厌当我点击所述菜单（例如 www.google.com/#）时我的 url 后面出现 # 符号我已经能够使用“动画滚动”javascript，它允许我平滑滚动站点到一个锚标签，它也隐藏了 # 符号。但由于某种原因，我在尝试让我的菜单在小屏幕上打开时遇到问题！

这里是菜单html

<div class=navmover>
    <nav id="effect" class="newClass">
        <ul>
            <li id="mobibutton" class="lightupmobi">
                <a href="#" id="button">
                    <div style="display:block !important;position:relative !important;top:8px !important;padding-left:0.5em !important;right:3px !important;text-align:left !important;">MENU</div>
                    <img id="mobibutton" src="images/nav-icon.png" style="position:relative !important;left:40% !important;">
                </a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link1 href=#intro>Top</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link2 href=#work>Work</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link3 href=#services>Services</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link4 href=#about>About</a>
            </li>
            <li id="hideme" class="lightup">
                <a id=link5 href=#contact>Contact</a>
            </li>
        </ul>
    </nav>
</div>

用于打开和关闭菜单的javascript

<!--Show Hide Button JS-->
<script>
    $(function() {
        $("#button1").click(function() {
            $("#effect").toggleClass("newClass", 1000);
            $("li").toggleClass("showme", 1000);
            return false;
        });
    });
</script>

用于在锚点之间平滑滚动的javascript

<script type=text/javascript>
    $(document).ready(function() {
        $("#link1").anchorScroll({fx:"easeInOutExpo"});
        $("#link2").anchorScroll({fx:"easeInOutExpo"});
        $("#link3").anchorScroll({fx:"easeInOutExpo"});
        $("#link4").anchorScroll({fx:"easeInOutExpo"});
        $("#link5").anchorScroll({fx:"easeInOutExpo"});
        $("#link6").anchorScroll({fx:"easeInOutExpo"});
        $("#link7").anchorScroll({fx:"easeInOutExpo"});
    });
</script>

<script type=text/javascript>
    function scrollTo(b) {
        var a=$(b).offset().top;
        $("html,body").animate({scrollTop:a},"slow");
    }
</script>

网站中的其余 javascript。抱歉...我意识到这很值得一看。

<script async type="text/javascript" src="//cdn.sublimevideo.net/js/kmaxx7p4.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script async src=javascripts/svg.js></script>
<script src=javascripts/jquery.js></script>
<script src=http://html5shim.googlecode.com/svn/trunk/html5.js></script>
<script src=http://code.jquery.com/jquery-1.9.1.min.js></script>
<script src=javascripts/jquery-migrate-1.2.1.min.js></script>
<script src=javascripts/jquery.animate.js type=text/javascript></script>
<script src=javascripts/jquery.scrollanchor.js type=text/javascript></script>
<script src=javascripts/jquery.sticky.js type=text/javascript></script>
<script async src=javascripts/jquery.inview.js type=text/javascript></script>
<script async src=javascripts/jquery.flexslider.js type=text/javascript></script>
<script async src=javascripts/jquery.prettyPhoto.js type=text/javascript></script>
<script src=http://vjs.zencdn.net/c/video.js></script>
<script type=text/javascript>function ReplaceContentInContainer(c,b){var a=document.getElementById(c);a.innerHTML=b}</script>
<script type=text/javascript>function preload(a){$(a).each(function(){$("<img/>")[0].src=this})}preload(["images/bg.png","images/cloudscape2.png","images/logo2.svg","images/logo2.png",]);</script>
<script>$(function(){$(".two").css("opacity",0).fadeTo(0,0);$(".one").on("mouseenter mouseleave",function(a){var b=a.type=="mouseenter"?$(".two",this).stop().fadeTo(200,1):$(".two",this).stop().fadeTo(200,0)})});</script>
<script>$(document).ready(function(){$("nav").sticky({topSpacing:0})});</script>
<script type=text/javascript>$(document).ready(function(){$("#link1").anchorScroll({fx:"easeInOutExpo"});$("#link2").anchorScroll({fx:"easeInOutExpo"});$("#link3").anchorScroll({fx:"easeInOutExpo"});$("#link4").anchorScroll({fx:"easeInOutExpo"});$("#link5").anchorScroll({fx:"easeInOutExpo"});$("#link6").anchorScroll({fx:"easeInOutExpo"});$("#link7").anchorScroll({fx:"easeInOutExpo"});});</script>
<script type=text/javascript>function scrollTo(b){var a=$(b).offset().top;$("html,body").animate({scrollTop:a},"slow");}</script>
<script>$(window).load(function(){$(".flexslider").flexslider({animation:"slide",slideshow:true,slideshowSpeed:3500,animationSpeed:1000})});</script>
<script type=text/javascript charset=utf-8>$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({social_tools:false,theme:"light_square"})});</script>

如果迫在眉睫，我还可以提供指向我网站的链接，这样您就可以在手机/平板电脑上亲自查看并查看我遇到的问题。让我知道我是否过于含糊，你们也需要更多信息。请帮忙，谢谢！

Answer 1

不要使用 # 作为您的 href 值。有很多不同的方法可以像您尝试做的那样“无目标”，包括：

• 在绑定到您的事件的代码中使用event.preventDefault()，以忽略默认链接行为
• 在绑定到您的事件的代码末尾使用 return false;，以中断对事件的任何进一步处理
• 使用href="javascript: void(0);"作为<a>标签的目标，使目标“什么都不做”

。 . .并且还有其他变化，视情况而定（例如，event.stopPropagation() 阻止事件触发所有元素的祖先，而不是当前元素）。

就我个人而言，在这种特殊情况下，我会自己走href="javascript: void(0);" 路线，但您还有一些回旋余地，可以提出您喜欢的方法。

---

更新：想一想，您使用<a> 标记开头是否有原因（例如，样式原因）？您可以简单地绑定<li> 上的单击，然后从等式中删除链接行为。 . .

Answer 2

你可以运行一个滚动功能来做你想做的事情

function goToByScroll(id){
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Answer 3

如果您不想要标签，因为您不希望它进入页面顶部，只需使用空的 javascript: URL。

<a href="javascript:">Link does nothing, tada</a>