1

我的 div 用一个按钮打开，该按钮有两个类（活动或非活动），我想在单击 boby 时更改类并且可以工作，但是当我再次单击该按钮时，该类被混淆了。

我已经搜索了很多，但我只是发现更改类或在 body click 上关闭 div，你能帮我把它们两者结合起来吗？

请，谢谢！

<!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 回答