jquery addClass/removeClass不工作

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>