1

私の 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>
4

2 に答える 2

2

これを参照してください：http://jsfiddle.net/LVfdk/2/

$(document).ready(function () {

 $(".link").click(function (e) {
    $(this).next("#content").slideToggle("fast");
    $(this).toggleClass("link_active");
    e.stopPropagation();
 });
 $(document).on('click', function (e) {
    if (e.target.id !== "content") {
        $('#content').css("display", "none");
        $('.link').removeClass("link_active");
        $('.link').addClass("link");
    }
 });
});
于 2013-01-21T09:55:25.447 に答える
0 
$(document).on('click', function() {
        $('#content').toggle();
        $('.link').toggleClass("link_active link");

    });
于 2013-01-21T09:04:33.813 に答える