在我的 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;
}
}
这是在我的 Rails 应用程序的每个页面中呈现的 _sidebar.html.erb 部分:
<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');
});
});
这些类没有像它看起来应该的那样被切换。所以我有两个问题:
- 当我突出显示链接时，我似乎无法更改悬停/文本颜色
- 当我点击其中一个链接时，我无法切换“class="active""。
两个例子都来自: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>
最佳答案
这是链接代码的答案:
$(document).ready(function() {
$('#sidebar .nav-pills a').click(function() {
$('#sidebar .nav-pills li.active').removeClass('active');
$(this).parent().addClass('active');
});
});
对于初学者来说，没有定义 [data-toggle] 属性，因此您的点击处理程序从未被调用。其次，你编写类切换的方式，每个按钮都会切换(你总是有一个激活而其余的不激活，或者除了那个按钮激活而那个按钮不激活之外的所有按钮)。
关于javascript - CSS 和 JavaScript 不会在悬停时按预期切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26493076/