Question

在我的Ruby on Rails应用程序上，我终于找到了一个侧边栏。现在，我只是遇到了背景悬停颜色的问题。我不太确定如何改变它。这是迄今为止侧边栏的CSS：

body,html,.row-offcanvas {
  height:100%;
}

body {
  padding-top: 50px;
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#fff;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}

#main {
  height:100%;
  overflow:auto;
}

/*
 * off Canvas sidebar
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }

  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}

这里的_sidebar.html.erb部分会被渲染到我的rails应用程序的每个页面中：

  <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <h3></h3>
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#">Section</a></li>
            <li><%= link_to 'Customers', Customers_path %></li>
            <li><%= link_to 'Projects', projects_path %></li>
        </ul>
      </div>
  </div>

出于某种原因，与我从中获取此代码的演示不同，当我将鼠标悬停在侧边栏中的每个链接时，背景颜色为灰色，文本变为白色，使其极难阅读。

不仅如此，我还尝试将此Javascript代码粘贴到单独的file.js中，并在每个页面后调用它：

$(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

这些课程看起来不应该被切换。所以我有两个问题，我希望有人帮助我：1）当我突出显示链接时，我似乎无法获得悬停/文本颜色变化，2）我可以＆＃39 ; t切换＆＃34; class =＆＃34; active＆＃34;＆＃34;当我点击其中一个链接时。

这两个例子来自：http://www.bootply.com/mL7j0aOINa

编辑：根据要求，这是页面的输出：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link data-turbolinks-track="true" href="/assets/bootstrap_custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/customers.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <meta content="authenticity_token" name="csrf-param" />
<meta content="6nUnsGwrHCTVOf/90d6aHJrG+m7lnv7g2MpOix06j2M=" name="csrf-token" />
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div><!--/.nav-collapse -->
</div><!--/.navbar -->

<div class="row-offcanvas row-offcanvas-left">
      <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <h3></h3>
        <ul class="nav nav-pills nav-stacked">
            <li><a href="/customers">Customers</a></li>
            <li><a href="/projects">Projects</a></li>
        </ul>
      </div>
  </div>
  <div id="main">
    <div class="col-md-12">
        <h1 align="center" class="page-header"></h1>
#deleted this part for example #
</table>
    </div>
  </div>
</div><!--/row-offcanvas -->
        <script type='text/javascript'>

            $(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
});

        </script>

</body>
</html>

Answer 1

我们需要查看erb的HTML输出。

此外，我没有看到此jquery选择器将应用于的任何代码： $（＆＃39; [数据肘节= offcanvas]＆＃39）

Answer 2

Bootstrap通常设计为使用您想要的任何设置进行覆盖。

#sidebar > div > ul > li:hover { 
    color: black; 
    background-color: gray; 
}

可以帮助你 - 用你想要的任何颜色替换黑色和灰色。

Answer 3

以下是链接代码的答案：

$(document).ready(function() {
  $('#sidebar .nav-pills a').click(function() {
    $('#sidebar .nav-pills li.active').removeClass('active');
    $(this).parent().addClass('active');
  });
});

首先，没有定义[data-toggle]属性，因此从未调用过点击处理程序。其次，你编写类切换的方式，每个按钮都会切换（你总是有一个活动而其余的都没有，或者除了那个活动按钮之外都是活动的而不是那个按钮）。

Answer 4

尝试

 .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
    color: red!important;
    background-color: yellow!important;
    }

请添加以上css并让我知道是否悬停问题已解决？

的javascript

 $('#sidebar .nav-pills a').click(function() {
        $('#sidebar .nav-pills li.active').removeClass('active');
        $(this).parent().addClass('active');
      });

需要CSS和Javascript的帮助

4 个答案: