私の div はボタンで開き、そのボタンには 2 つのクラス (アクティブかどうか) があります。boby をクリックしたときにクラスを変更したいのですが、ボタンをもう一度クリックするとクラスが曇ってしまいます。
私はたくさん検索しましたが、クラスを変更するか、ボディクリックでdivを閉じることがわかりました.2つを組み合わせるのを手伝ってもらえますか?
お願いします、ありがとう!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</head>
<style>
body{background:#1E1E1E;}
.link{background:gray;color:black;}
.link_active{background:green;color:white;}
#content{background:gray;border:1px solid;width:100px;height:100px;display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".link").toggle(function(){
$(this).toggleClass("link_active");
},
function () {
$(this).removeClass("active");
});
$(".link").click(function(){
$(this).next("#content").slideToggle("fast");
$(this).removeClass("active");
});
$(document).on('click', function() {
$('#content').css("display","none");
$('.link').removeClass("link_active");
$('.link').addClass("link");
});
});
</script>
<body>
<a href="#" class="link">OPEN</a>
<div id="content"> content content content content content content</div>
</body>
</html>