Question

jQuery如何做鼠标点击事件更改CSS

HTML代码如下：
<div class="AAA"><a href="#">链接</a></div>
<div class="BBB">显示.隐藏</div>
我希望的是：
.BBB的CSS属性默认是display: none；
点击.AAA，.BBB的CSS属性变为display: block；
点击除.AAA外的任意元素，.BBB的CSS属性变为display: none；
=================================================
$(".AAA).click(function() {
$(".BBB").css('display','block');
}); //我这样写点击.AAA可以正常显示.BBB，但是怎么写可以点击其他地方，就又把.BBB隐藏了呢！

Answer 1

做鼠标点击事件更改CSS方法：

若点击AAA后一直都是none，点任意一个地方都是none.
<div class="BBB" style="display: none;">

则把hide,show方法，换成css()，和你上面那样式放进去即可。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

Answer 2

$("body").click(function(){$(".BBB.css('display','none')")});
然后在你的代码下面加一行
$(".AAA).click(function() {
$(".BBB").css('display','block');
e.stopPropagation();
});

Answer 3

<script src="JS/jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).click(function (e) {
                if (e.target != $('.AAA').get(0)) {
                    $(".BBB").hide();
                } else {
                    $(".BBB").show();
                }
            });
        });
    </script>

追问

怎么点击AAA后一直都是none呢。点任意一个地方都是none.

追答

把hide,show方法，换成css()，和你上面那样式放进去就可以了

把hide,show方法，换成css()，和你上面那样式放进去就可以了

Answer 4

$(".AAA).click(function(e) {        
    $(".BBB").css('display','block');
  e.stopPropagation();
});
$(document).click(function(e) {        
    $(".BBB").css('display','none');
    e.stopPropagation();
});