个人中心
gpt4 book ai didi

jquery - 单击时更改 Bootstrap 4 下拉元素的颜色

转载 作者：行者123 更新时间：2023-12-01 08:34:47 25 4
gpt4 key购买 nike

我目前正在使用 Bootstrap，并正在测试以下动画下拉导航栏的代码。请参阅以下代码片段:

#sidebar {
  background-color: #3d155f;
  color: white;
}

#content {
  padding-left: 30px;
}

/* Sticky Footer Classes */

html,
body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
  font-family: "Montserrat", sans-serif;
}

/* Dropdown Menu Animation for Bootstrap Navbar by Startbootstrap.com - https://startbootstrap.com/snippets/animated-navbar-dropdown/ */

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Title</title>
</head>

<body>
  <!-- navbar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand justify-content-start" href="#">Title</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Menu
                        </a>
            <!-- Here's the magic. Add the .animate and .slide-in classes to your .dropdown-menu and you're all set! -->
            <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Link 1</a>
              <a class="dropdown-item" href="#">Link 2</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Contact</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- main body -->
  <div class="container-fluid">
    <div class="row">
      <div id="sidebar" class="row col-md-4 ml-0 py-3 px-3 justify-content-center">
        <div class="row col-12">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio aliquam sequi, explicabo doloremque esse maiores rerum natus recusandae repellat amet porro modi saepe ratione minima voluptas. Assumenda mollitia libero animi pariatur officiis iste odio
          nihil repellat neque at, optio veritatis esse repudiandae enim alias sed eaque vero a illo expedita deserunt dolor nemo laudantium. Suscipit pariatur quaerat exercitationem saepe aut?
        </div>
      </div>
      <div id="content" class="row col-md-8 ml-0 py-3 pl-5 align-items-center justify-content-center order-1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime tempore quibusdam quia facere magnam ipsa dolorum fuga natus, commodi enim repudiandae temporibus modi eius obcaecati explicabo tempora sunt officia. Id inventore hic unde ipsam sit amet
        eveniet, provident quisquam, harum est optio nobis odit aspernatur suscipit dolor dolorum eligendi quis. Unde, modi eligendi enim pariatur voluptatibus odit nobis atque numquam consequuntur temporibus quaerat minus voluptas molestiae accusamus,
        et ea quis ab facilis aperiam dolore. Ipsum sed officiis quos placeat facilis, id esse aliquam eaque quisquam ad eius! Repudiandae dolorum quos modi amet accusamus corporis aliquam laboriosam soluta. Hic, incidunt ipsum.
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Name Here</small>
    </div>
  </footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

如何更改下拉菜单中元素单击时显示的颜色？我的猜测是我需要在 CSS 中的某处添加 :click 参数。

最佳答案

如果您检查菜单中元素上的 DOM，您会发现需要覆盖的规则是 .dropdown-item:active 上的 background-color。为此，只需在您自己的 CSS 代码中使选择器更加具体，例如通过包含 .navbar:

.navbar .dropdown-item:active {
  background-color: #C00;
}

这是一个工作示例:

#sidebar {
  background-color: #3d155f;
  color: white;
}

#content {
  padding-left: 30px;
}


/* Sticky Footer Classes */

html,
body {
  height: 100%;
}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
  font-family: "Montserrat", sans-serif;
}


/* Dropdown Menu Animation for Bootstrap Navbar by Startbootstrap.com - https://startbootstrap.com/snippets/animated-navbar-dropdown/ */

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}

.navbar .dropdown-item:active {
  background-color: #C00;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand justify-content-start" href="#">Title</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
          <div class="dropdown-menu dropdown-menu-right animate slideIn" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Contact</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- main body -->
<div class="container-fluid">
  <div class="row">
    <div id="sidebar" class="row col-md-4 ml-0 py-3 px-3 justify-content-center">
      <div class="row col-12">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio aliquam sequi, explicabo doloremque esse maiores rerum natus recusandae repellat amet porro modi saepe ratione minima voluptas. Assumenda mollitia libero animi pariatur officiis iste odio
        nihil repellat neque at, optio veritatis esse repudiandae enim alias sed eaque vero a illo expedita deserunt dolor nemo laudantium. Suscipit pariatur quaerat exercitationem saepe aut?
      </div>
    </div>
    <div id="content" class="row col-md-8 ml-0 py-3 pl-5 align-items-center justify-content-center order-1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime tempore quibusdam quia facere magnam ipsa dolorum fuga natus, commodi enim repudiandae temporibus modi eius obcaecati explicabo tempora sunt officia. Id inventore hic unde ipsam sit amet
      eveniet, provident quisquam, harum est optio nobis odit aspernatur suscipit dolor dolorum eligendi quis. Unde, modi eligendi enim pariatur voluptatibus odit nobis atque numquam consequuntur temporibus quaerat minus voluptas molestiae accusamus,
      et ea quis ab facilis aperiam dolore. Ipsum sed officiis quos placeat facilis, id esse aliquam eaque quisquam ad eius! Repudiandae dolorum quos modi amet accusamus corporis aliquam laboriosam soluta. Hic, incidunt ipsum.
    </div>
  </div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
  <div class="container text-center">
    <small>Copyright &copy; Your Name Here</small>
  </div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

关于jquery - 单击时更改 Bootstrap 4 下拉元素的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57774314/

25 4 0
文章推荐： jquery - 链接和回调语法
文章推荐： Python脚本: Character 1 equal to character n
文章推荐： python - 你能编写一个函数来在 Python 中创建更多函数吗？
文章推荐： jquery - 从用户的本地系统获取文件的属性(上次修改日期)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com