javascript - 屏幕外的 jquery 元素导致水平滚动

Question

我有一个屏幕外的元素，单击后会进入屏幕。问题是它实际上不是在屏幕外，而是水平扩展我的文档，因此我在页面底部看到了一个滚动条。

这是网站:http://ericbrockmanwebsites.com/dev4/

这是 html:

<div id="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="dashboard">
                <nav id="access">
                    <div class="open"></div><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
                </nav>
            </div> <!-- dashboard -->
        </div> <!-- span12 -->
    </div> <!-- row-fluid -->

这是CSS:

#container-fluid {
  width:1280px;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -659px;
  z-index: 100;
}

#access {
  display: block;
  float: right;
  margin: 10px auto 0;
  width:730px;
}

.open {
  background: #cabd32 url(images/open.png) top left no-repeat;
  background-position:center;
  float:left;
  padding: 32px 35px 33px;
}

.close {
  background: #cabd32 url(images/close.png) top left no-repeat;
  background-position:center;
  float:left;
  padding: 32px 35px 33px;
}

这是脚本:(由 @AlexCheuk 编写)

$('.open').bind('click',function(){ 
    $('#dashboard').stop().animate(
    {
        right: $(this).hasClass('close') ? '-659px' : '0'
    });
    $(this).toggleClass('close');
});

非常感谢任何帮助。

Answer 1

最简单的似乎是:

添加body {overflow:hidden;}或者使用overflow-x