在我的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.当我高亮显示链接时，似乎无法更改悬停/文本颜色
1.当我单击其中一个链接时，无法切换"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>

4条答案

按热度按时间

pgccezyw1#

下面是链接代码的答案：

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

首先，没有定义[data-toggle]属性，所以你的click处理器从来没有被调用过;其次，你编写类toggle的方式，每个按钮都会切换（你总是有一个激活，其余的不激活，或者除了那个按钮激活，其余的都不激活）。

赞(0）回复(0）举报 2023-02-01

balp4ylt2#

我们需要查看erb的HTML输出。
此外，我没有看到任何jquery选择器可以应用的代码：$（'[数据切换=关闭画布]'）

hpcdzsge3#

Bootstrap通常被设计为可以用任何您想要的设置覆盖。

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

应该能帮你摆脱困境--用你想要的任何颜色取代黑色和灰色。

ckocjqey4#

尝试

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

ruby-on-rails 悬停时CSS和JavaScript未按预期切换

编辑

4条答案

相关问题

热门标签

最新问答