1

我有一个导航栏，它被编程为 on.click 滚动到屏幕上，然后再次滚动 on.click。

它工作得很好，但现在根本不工作。我确实将布局转换为 12 col 网格以实现流畅的响应式设计，但即使我将其设置为另一种方式，现在它仍然无法正常工作。

任何帮助总是受到赞赏。

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

并标记：

<div class="row-fluid">
    <div class="span12">
        <div id="dashboard">
            <nav id="access">
                <div class="open">Here's the Nav Bar
            </nav>
        </div> <!-- dashboard -->
    </div> <!-- span12 -->
</div> <!-- row-fluid -->

和脚本：

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

现在我认为是 css 造成了麻烦，但我不确定从哪里看，只是学习响应式设计，我认为转储我的整个样式表没有帮助，但我会尝试挑选相关的位：

html {
    min-height: 100%;
    background-size: cover;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

body{
    min-height:100%;
    overflow-x:hidden;
}

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

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

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

.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;
}

一直在挑选它几个小时，无济于事，爱一些帮助。干杯，

4

1 回答 1

0

尝试这个：

脚本

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

和CSSdashboard的变化 

#dashboard {
  font-size:30px;
  float:left;
  position: absolute;
  right: -790px;
  z-index: 100;
}
于 2013-03-01T05:46:15.080 回答