1

我正在构建一个具有固定位置的左侧按钮，当单击它时它会向右滑动，另一个 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;
}

我的代码基本上在单击按钮时将 margin-left 添加到侧面菜单和侧面按钮。

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

4

1 回答 1

0

you have a "#" in you menu items' href, which is essentially a link to the top of the page. Either get rid of the "#" in the href, or use e.preventDefault() in the click handler for the menu items.

于 2013-04-27T21:53:53.473 回答