ドロップダウンで背景色を白にする方法

Question

こんにちは、私はこれをmysiteの例としてcodepenとして使っています。私の質問は、5番目のパネルで、それを別の色をクリックすると、ドロップダウンボックスを作ることが可能ですか？

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; 
} 

はこの部分で遊んでみましたかわかりませんが、これは両方のボックスに影響を与えます。あなたはそれ以上のパネルから離れて、それを識別するために、パネルに別のクラス、IDまたは属性を与えたいヘルプ

Answer 1

ため

感謝。このような何か：その後、

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

とあなたのCSSに

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

を追加