jquery addClass/removeClass ain'；行不通

因此，我尝试在div打开时添加和删除透明背景色，在关闭时删除。有什么关于堆栈溢出的想法吗

HTML

JS

塔克斯

使用

演示

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（'.recipes'）.toggleClass（'selected'）；
});
});
.recipes{
显示：无；
}
.选定{
背景色：#699e6d；
不透明度：0.7；
显示：块；
}

食谱

成分1
成分2
成分3
成分4
Lorem ipsum dolor sit amet，是一位杰出的献身者

很乐意效劳，先生。快乐编码。
<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>

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

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