Question

我的div打开了一个按钮，该按钮有两个类（有效或无效），我想在我点击boby时更改课程，但是当我再次点击按钮时，课程就会被迷惑。

我搜索了很多，但我刚发现要改变课程或关闭身体点击的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>

Answer 1

请参阅：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");
    }
 });
});

Answer 2

$(document).on('click', function() {
        $('#content').toggle();
        $('.link').toggleClass("link_active link");

    });

关闭div并更改按钮类jquery

2 个答案: