Question

我有一个导航栏被编程为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;
}

一直在挑选它几个小时，无济于事，热爱一些帮助。欢呼声，

Answer 1

试试这个：

<强> SCRIPT

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

并在 CSS

中更改dashboard

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

响应式网格打破了我的js元素

1 个答案: