0
我創造了這個：JQuery的：開始的slideToggle（）爲隱藏
$(document).ready(function(){
var speed = 500;
$('.brewed').click(function(){
$('.ifBrewed').slideToggle(speed);
});
});html, body {
background-color: black;
color: white;
}
input[type=checkbox] {
display:none;
}
.step_1, .step_2, .step_3 {
padding: 2%;
margin: 0 auto;
font-weight: 100;
}
input[type=checkbox]:checked + label {
border: 3px solid white;
}
.ifBrewed {
background-color: #181818;
padding: 2%;
display: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!-- Step 1 -->
<div class="row">
<h2>How do you enjoy your coffee?</h2>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
<div>
<input type="checkbox" name="site" id="so" />
<label for="so">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Espresso</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
<div>
<input type="checkbox" name="site" id="sf" />
<label for="sf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Brewed</h3>
<p>add the description here about this coffee!</p>
</label>
</div>
</div>
</div>
<!-- Step 1.5 -->
<div class="ifBrewed">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="ba" />
<label for="ba">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Drip coffee</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bb" />
<label for="bb">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Aeropress</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bc" />
<label for="bc">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>French press</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bd" />
<label for="bd">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Vacuum pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="be" />
<label for="be">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Syphon</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bf" />
<label for="bf">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>V60</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bg" />
<label for="bg">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Chemex</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bh" />
<label for="bh">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Moka pot</h3>
</label>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="row">
<div class="col-lg-3 col-md-3"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bi" />
<label for="bi">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Percolato</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
<div>
<input type="checkbox" name="site" id="bj" />
<label for="bj">
<img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
<h3>Eva solo</h3>
</label>
</div>
</div>
<div class="col-lg-3 col-md-3"></div>
</div>
</div>
</div>我不喜歡其他線程說，添加顯示：無功能，並且我也嘗試在CSS和JQuery .css（）。 這很好，但我需要幫助這個小錯誤。如你所見，當你點擊幻燈片切換輸入時，它會切換，然後切換回來，但我希望它保持不切換，直到我再次單擊它。
我該怎麼做？
謝謝！
你是最好的，謝謝你解釋！ –