如何在访问/激活子元素时使父元素的颜色发生变化 [英] How to make Parent element's color to change when child element is visited/active

查看：31
本文介绍了如何在访问/激活子元素时使父元素的颜色发生变化的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个下拉导航.我想要做的是当我单击任何子菜单链接时，我希望在链接处于活动状态时父按钮的颜色保持更改.这是代码的小提琴链接.https://jsfiddle.net/v28ydshL/

<div id="menubar" class="collapse navbar-collapse row"><ul id="dropdownNavbar" class="nav navbar-nav">

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-time"></span>考勤卡<span class="caret"></span></button><div class="dropdown-content"><a id="showTimeCard" href="#">我的考勤卡</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a><a href="#">子菜单 5</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-stats"></span>项目<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-user"></span>人力资源链接<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-screenshot"></span>离开追踪器<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-briefcase"></span>帐户<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a><a href="#">子菜单 5</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-headphones"></span>服务台<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-file"></span>报告<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a><a href="#">子菜单 5</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-cog"></span>设置<span class="caret"></span></button><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a>

    • </nav>

    这是我的 css

    ul {列表样式类型:无；左边距:1px；}.落下 {向左飘浮;填充右:1px;}.dropbtn{背景色:#060975；高度:30px；边框半径:0px 10px；}li 按钮，.dropbtn {显示:内联块；背景色:#3382d5；白颜色;文本对齐:居中；}li 按钮:悬停，.dropdown:悬停 .dropbtn {背景颜色:#31b0d5；}按钮.下拉{显示:内联块；}.下拉内容{显示:无；位置:绝对；背景颜色:#e8f3f4；最小宽度:100%；box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);z-索引:10；}.navbar-header{溢出:可见；z-索引:1；}.dropdown-content a {颜色:黑色;填充:5px 10px；显示:块；文本对齐:左；}.dropdown-content a:hover {背景颜色:#d8dee2}.dropdown-content a:visited .dropbtn{背景颜色:#e8f3f4；}.dropdown:悬停 .dropdown-content {显示:块；}#菜单栏{填充顶部:5px；溢出:可见；z-索引:10；填充左:0px;填充右:0px；边距:0px；}#dropdownNavbar{边距:0px；}

    解决方案

    由于您使用的是 Bootstrap - 您也必须使用 jquery - 这里是一种 jquery 方法.为您想要的活动颜色创建一个类，然后单击 - 从所有按钮中删除该类，然后将其应用到被单击的那个.

    $(document).ready(function() {$('.dropdown').click(function() {$('.dropbtn').removeClass('dropbtn-active');$(this).find('.dropbtn').addClass('dropbtn-active')});})

    ul {列表样式类型:无；左边距:1px；}.落下 {向左飘浮;填充右:1px；}.dropbtn {背景色:#060975；高度:30px；边框半径:0px 10px；}li 按钮，.dropbtn {显示:内联块；背景颜色:#3382d5；白颜色;文本对齐:居中；}.dropbtn-active {背景颜色:#31b0d5；}li按钮:悬停，.dropdown:悬停 .dropbtn {背景颜色:#31b0d5；}.dropdown:active .dropbtn {背景颜色:#31b0d5；}按钮.下拉{显示:内联块；}.下拉内容{显示:无；位置:绝对；背景颜色:#e8f3f4；最小宽度:100%；box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);z-索引:10；}.navbar-header {溢出:可见；z-索引:1；}.dropdown-content a {颜色:黑色;填充:5px 10px；显示:块；文本对齐:左；}.dropdown-content a:hover {背景颜色:#d8dee2}.dropdown-content a:visited .dropbtn {背景颜色:#e8f3f4；}.dropdown:悬停 .dropdown-content {显示:块；}#菜单栏 {填充顶部:5px；溢出:可见；z-索引:10；填充左:0px；填充右:0px；边距:0px；}#dropdownNavbar {边距:0px；}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><导航><div class="navbar-header"><button style="background-color: #3382d5;"type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menubar"><span style="background-color: white;"class="icon-bar"></span><span style="background-color: white;"class="icon-bar"></span><span style="background-color: white;"class="icon-bar"></span>

    <div id="menubar" class="collapse navbar-collapse row"><ul id="dropdownNavbar" class="nav navbar-nav">

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-time"></span>考勤卡<span class="caret"></span><div class="dropdown-content"><a id="showTimeCard" href="#">我的考勤卡</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a><a href="#">子菜单 5</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-stats"></span>项目<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-user"></span>人力资源链接<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-screenshot"></span>离开追踪器<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-briefcase"></span>帐户<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a><a href="#">子菜单 5</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-headphones"></span>服务台<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-file"></span>报告<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a><a href="#">子菜单 4</a><a href="#">子菜单 5</a>

  • <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-cog"></span>设置<span class="caret"></span><div class="dropdown-content"><a href="#">子菜单 1</a><a href="#">子菜单 2</a><a href="#">子菜单 3</a>

    • </nav>

    I have a dropdown navigation. What i want to do is when i click on any of the sub menu links, i want the color of the parent button to remain changed when the link is active. Here is the fiddle link to the code. https://jsfiddle.net/v28ydshL/

    <nav>
                <div class="navbar-header">
                    <button style="background-color: #3382d5;" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menubar">
                        <span style="background-color: white;" class="icon-bar"></span>
                        <span style="background-color: white;" class="icon-bar"></span>
                        <span style="background-color: white;" class="icon-bar"></span>                        
                    </button>
                </div>
                <div id="menubar" class=" collapse navbar-collapse row">
                    <ul id="dropdownNavbar" class="nav navbar-nav">
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-time"></span> Time Card
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a id="showTimeCard" href="#">My Time Card</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                                <a href="#">Sub Menu 4</a>
                                <a href="#">Sub Menu 5</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-stats"></span> Project
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-user"></span> HR Links
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn">
                                <span class="glyphicon glyphicon-screenshot"></span> Leave Tracker
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                                <a href="#">Sub Menu 4</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn">
                                <span class="glyphicon glyphicon-briefcase"></span> Accounts
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                                <a href="#">Sub Menu 4</a>
                                <a href="#">Sub Menu 5</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn">
                                <span class="glyphicon glyphicon-headphones"></span> Service Desk
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                                <a href="#">Sub Menu 4</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn">
                                <span class="glyphicon glyphicon-file"></span> Reports
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                                <a href="#">Sub Menu 4</a>
                                <a href="#">Sub Menu 5</a>
                            </div>
                        </li>
                        <li class="dropdown">
                            <button type="button" class="btn dropbtn">
                                <span class="glyphicon glyphicon-cog"></span> Settings
                                <span class="caret"></span></button>
                            <div class="dropdown-content">
                                <a href="#">Sub Menu 1</a>
                                <a href="#">Sub Menu 2</a>
                                <a href="#">Sub Menu 3</a>
                            </div>
                        </li> 
                    </ul>
                </div>
            </nav>

    here is my css

    ul {
    list-style-type: none;
    padding-left: 1px;

}
.dropdown {
    float: left;
    padding-right:1px;
}
.dropbtn{
    background-color: #060975;
    height:30px;
    border-radius: 0px 10px;
}
li button, .dropbtn {
    display: inline-block;
    background-color:#3382d5;
    color: white;
    text-align: center;
}
li button:hover, .dropdown:hover .dropbtn {
    background-color: #31b0d5;
}
button.dropdown {
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #e8f3f4;
    min-width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
    z-index: 10;
}
.navbar-header{
    overflow: visible;
    z-index: 1;
}
.dropdown-content a {
    color: black;
    padding: 5px 10px;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: #d8dee2
}
.dropdown-content a:visited .dropbtn{
    background-color: #e8f3f4;
}
.dropdown:hover .dropdown-content {
    display: block;
}
#menubar{
    padding-top: 5px;
    overflow: visible;
    z-index: 10;
    padding-left:0px;
    padding-right: 0px;
    margin: 0px;
}
#dropdownNavbar{
    margin: 0px;
}

    解决方案

    Since you are using Bootstrap - you must also be using jquery - here is a jquery approach. Create a class for the active color you want , then on the click - remove that class from all the buttons and then apply it to the one that was clicked.

    $(document).ready(function() {
  $('.dropdown').click(function() {
    $('.dropbtn').removeClass('dropbtn-active');
    $(this).find('.dropbtn').addClass('dropbtn-active')
  });

})

    ul {
  list-style-type: none;
  padding-left: 1px;
}
.dropdown {
  float: left;
  padding-right: 1px;
}
.dropbtn {
  background-color: #060975;
  height: 30px;
  border-radius: 0px 10px;
}
li button,
.dropbtn {
  display: inline-block;
  background-color: #3382d5;
  color: white;
  text-align: center;
}
.dropbtn-active {
  background-color: #31b0d5;
}
li button:hover,
.dropdown:hover .dropbtn {
  background-color: #31b0d5;
}
.dropdown:active .dropbtn {
  background-color: #31b0d5;
}
button.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #e8f3f4;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.navbar-header {
  overflow: visible;
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 5px 10px;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #d8dee2
}
.dropdown-content a:visited .dropbtn {
  background-color: #e8f3f4;
}
.dropdown:hover .dropdown-content {
  display: block;
}
#menubar {
  padding-top: 5px;
  overflow: visible;
  z-index: 10;
  padding-left: 0px;
  padding-right: 0px;
  margin: 0px;
}
#dropdownNavbar {
  margin: 0px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <div class="navbar-header">
    <button style="background-color: #3382d5;" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menubar">
      <span style="background-color: white;" class="icon-bar"></span>
      <span style="background-color: white;" class="icon-bar"></span>
      <span style="background-color: white;" class="icon-bar"></span> 
    </button>
  </div>
  <div id="menubar" class=" collapse navbar-collapse row">
    <ul id="dropdownNavbar" class="nav navbar-nav">
      <li class="dropdown">
        <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-time"></span> Time Card
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a id="showTimeCard" href="#">My Time Card</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
          <a href="#">Sub Menu 4</a>
          <a href="#">Sub Menu 5</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-stats"></span> Project
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn"><span class="glyphicon glyphicon-user"></span> HR Links
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn">
          <span class="glyphicon glyphicon-screenshot"></span> Leave Tracker
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
          <a href="#">Sub Menu 4</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn">
          <span class="glyphicon glyphicon-briefcase"></span> Accounts
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
          <a href="#">Sub Menu 4</a>
          <a href="#">Sub Menu 5</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn">
          <span class="glyphicon glyphicon-headphones"></span> Service Desk
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
          <a href="#">Sub Menu 4</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn">
          <span class="glyphicon glyphicon-file"></span> Reports
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
          <a href="#">Sub Menu 4</a>
          <a href="#">Sub Menu 5</a>
        </div>
      </li>
      <li class="dropdown">
        <button type="button" class="btn dropbtn">
          <span class="glyphicon glyphicon-cog"></span> Settings
          <span class="caret"></span>
        </button>
        <div class="dropdown-content">
          <a href="#">Sub Menu 1</a>
          <a href="#">Sub Menu 2</a>
          <a href="#">Sub Menu 3</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

    这篇关于如何在访问/激活子元素时使父元素的颜色发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆