jquery addClass/removeClass ain't work

Question

所以我正在尝试在div 打开后为其添加和删除透明背景色，并在关闭时将其删除。 有什么想法哦，堆栈溢出的伟大思想吗？

.HTML

<div class="col-md-12 col-xs-12">
<div class="recipePicContainer">
<div id="checkBoxes">
<li class="recipe" id="recipe01"></li>
<ul class="ingredientsAndInstructions">
<li><input type="checkbox"> ingredient 1</li>
<li><input type="checkbox"> ingredient 2</li>
<li><input type="checkbox"> ingredient 3</li>
<li><input type="checkbox"> ingredient 4</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>
</div>
</div>

.CSS

.selected{
background-color: #699e6d;
opacity: 0.7;
}

.JS

var main = function() {
$(document).ready(function () {
$('ul').hide();
$('.recipe').click(function () {
$('.ingredientsAndInstructions').toggle("slow");
$('.recipePicContainer').click(function () {
$(this).addClass("selected");
}, function () {
$(this).removeClass('selected');
});
});
});
};
$(document).ready(main);

谢谢！

Answer 1

使用toggleClass()

演示

$(document).ready(function() {
$('button').click(function() {
$('.recipes').toggleClass('selected');
});
});

.recipes {
display: none;
}
.selected {
background-color: #699e6d;
opacity: 0.7;
display: block;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<div class="col-md-12 col-xs-12">
<button class='btn btn-primary'><h3>Recipes</h3></button>
<ul class="recipes">
<li><input type="checkbox"> ingredient 1</li>
<li><input type="checkbox"> ingredient 2</li>
<li><input type="checkbox"> ingredient 3</li>
<li><input type="checkbox"> ingredient 4</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
</div>

<script src="https://cdn.jsdelivr.net/g/jquery@2.2.4,bootstrap@3.3.7"></script>