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

我正在构建一个固定位置的左侧按钮，点击后它向右滑动，另一个div向左滑动并显示一些选项。固定定位左菜单与jQuery效果问题？

我设法做到了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; 
}

我的代码基本上增加利润率左到副作用菜单和单击按钮时的侧面按钮。

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

来源

2013-04-27 Engineeroholic