固定定位左菜单与jquery效果问题？

Question

我正在构建一个固定位置的左侧按钮，当点击它向右滑动时，另一个div向左滑动到右侧并显示一些选项。

我设法在Jquery和css中完成了这个效果。 然而有一个错误，当我向下滚动一页或更多页面并按下该位置的按钮时，它会回到顶部并起作用！< /强>

它在网站顶部工作正常！

这是我的剧本：

$(document).ready(function(){

    $(".events, .messages").click(function() {
    $(".side-menu").toggleClass("sideMenu-expand");
    $(".side-buttons").toggleClass("sideButtons-expand");
});

这是我的HTML：

 <div class="side-menu">    
    <div class="side-buttons">
        <ul>

        <li ><a class="events" href="#"></a></li>
        <li ><a class="messages" href="#"></a></li>

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

这是我的Css：

.side-menu{
height:300px;
background:#fff;
width:150px;
position:fixed;
margin-left:-158px;
margin-top:100px;
border:7px solid #232323;
border-radius: 8px; 
-moz-border-radius: 0 8px 8px 0px; /* vendor specific for mozilla */
-webkit-border-radius: 0 8px 8px 0px; /* vendor specific for webkit browsers */
float:left;
}
.sideMenu-expand{
    position:fixed;
    margin-left:-7px;

}
.side-buttons{
    width:40px;
    height:100px;
    margin-top:100px;
    background:url(images/side-button.png) no-repeat;
position:fixed;
margin-left:152px;
float:left;
z-index:100000;
}
 .side-buttons ul{
    list-style-type:none;
}
.side-buttons ul li a.events{
    display:block;
    width:30px;
    height:18px;
    margin-top:12px;
    margin-left:-1px;
    background:url(images/icons/events.png) no-repeat;
}
.side-buttons ul li a.events:hover{
    background:url(images/icons/events-ho.png) no-repeat;
}
.side-buttons ul li a.messages{
    display:block;
    width:30px;
    height:18px;
    margin-left:10px;
    margin-top:10px;
    background:url(images/icons/messages.png) no-repeat;
    }
.side-buttons ul li a.messages:hover{
background:url(images/icons/messages-ho.png) no-repeat;
       }

.sideButtons-expand{
    position:fixed;
    margin-left:155px;
    z-index:100000;
}  

我的代码基本上将边距添加到侧边菜单和单击按钮时的侧边按钮。

您的帮助将不胜感激。 感谢。

Answer 1

菜单项“href中有一个”＃“，它实际上是指向页面顶部的链接。 要么摆脱href中的“＃”，要么在菜单项的点击处理程序中使用e.preventDefault()。