javascript - 如何使下拉菜单的背景颜色为白色

Question

大家好，我正在使用这个 codepen作为我网站上的例子。我的问题是，在第五面板上，当你点击它时，可以使下拉框变成不同的颜色吗？

HTML:

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600|Source+Code+Pro' rel='stylesheet' type='text/css'>

<div class="patch-container">
  <div class="patch-item patch-button" data-patch-panel="1">One</div>
  <div class="patch-panel" data-patch-panel="1">One</div>
  <div class="patch-item patch-button" data-patch-panel="2">Two</div>
  <div class="patch-panel" data-patch-panel="2">Two</div>
  <div class="patch-item patch-button" data-patch-panel="3">Three</div>
  <div class="patch-panel" data-patch-panel="3">Three</div>
  <div class="patch-item patch-button wide" id="js-four" data-patch-panel="4">Four</div>
  <div class="patch-panel" data-patch-panel="4">Four</div>
  <div class="patch-item patch-button wide" id="js-five" data-patch-panel="5">Five</div>
  <div class="patch-panel" data-patch-panel="5">Five</div>
</div>

CSS:

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-appearance: none;
}

body {
  height: 100%;
  background-color: #22313F;
  font-family: 'Open Sans';
  -webkit-font-smoothing: subpixel-antialiased;
}
/********************************
Plugin Hero Example
********************************/

.patch-button {
  color: #FFF;
  cursor: pointer;
  font-size: 1em;
  font-size: 1.5em;
  letter-spacing: 0;
  line-height: 150px;
}

.patch-button:hover {
  border: solid 3px #FFF;
  line-height: 144px;
}

.patch-container {
  background-color: #2C3E50;
  border-radius: 5px;
  color: #FFF;
  margin: 4%;
  overflow: auto;
  padding: 2%;
  position: relative;
  text-align: center;
  zoom: 1;
  max-width: 1000px;
}

.patch-item {
  background-color: #FFF;
  border-radius: 4px;
  float: left;
  height: 150px;
  margin: 0 0 2% 0;
  width: 100%;
}

.patch-panel {
  background-color: #FFF;
  border-radius: 4px;
  color: #FFF;
  display: none;
  float: left;
  font-size: 1.5em;
  height: 250px;
  line-height: 250px;
  margin: 0 0 2% 0;
  width: 100%;
}

[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
  background: #F5AB35;
}

[data-patch-panel='2'],
[data-patch-panel='6'],
[data-patch-panel='9'] {
  background: #00B16A;
}

[data-patch-panel='3'],
[data-patch-panel='7'],
[data-patch-panel='10'] {
  background: #E74C3C;
}

[data-patch-panel='4'],
[data-patch-panel='8'],
[data-patch-panel='12'] {
  background: #3498DB;
}
/********************************
Media Queries
********************************/

@media only screen and (min-width: 550px) {
  h2 {
    font-size: 3.3rem;
  }
  .patch-item {
    margin: 1%;
    width: 48%;
  }
  .patch-panel {
    margin: 1%;
    width: 98%;
  }
  .components {
    margin: 1.5%;
    width: 46%;
  }
}

@media only screen and (min-width: 992px) {
  .patch-container {
    margin: 4% auto;
  }
  .patch-item {
    margin: 0.6667%;
    margin: calc(4% / 6);
    width: 32%;
  }
  .patch-panel {
    margin: 0.6667%;
    margin: calc(4% / 6);
    width: 98.6666%;
    width: calc(100% - (4% / 6) * 2);
  }
  .resize {
    margin: 50px auto -2%;
  }
  .wide {
    margin: 0.6667%;
    margin: calc(4% / 6);
    width: 48.6666%;
    width: calc(50% - (4% / 6) * 2);
  }
  .thin {
    width: 23.6666%;
    width: calc(25% - (4% / 6) * 2);
  }
}

所以再次解释一下，一切正常。但我想要发生的是在面板 5 上。它自己的盒子很好，但是当你点击它时，我希望它不是橙色，而是出现的新盒子上的不同颜色。所以对于新框的出现，我希望它是白色的，带有黑色边框，但我不确定如何

[data-patch-panel='1'],
[data-patch-panel='5'],
[data-patch-panel='8'] {
  background: #F5AB35;
}

尝试玩这部分，但这会影响两个盒子。

感谢帮助

Answer 1

您想为面板提供另一个类、id 或属性，以区别于其上方的面板。像这样:

<div class="patch-panel panel-five" data-patch-panel="5">Five</div>

然后添加

.panel-five {
  background-color: #FFFFFF;
}

到你的 CSS