JQuery 点击指定元素显示/点击指定元素之外的元素隐藏（event.target/is()）-我的部落

JQuery 点击指定元素显示/点击指定元素之外的元素隐藏（event.target/is()）

Html代码：

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

    $('body').click(function(e){

        if (!$(e.target).is('.side, li, ul')){

            $('ul').slideUp();

        }else{

            $('ul').slideDown();

        }

    });

});

</script>

<style type="text/css">

.side{

    width: 500px;

    height: 500px;

    margin: 50px auto;

    background: #f00;

}

</style>

</head>

<body>

    <div class="side">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

</body>

</html>

e.target：获取点击目标

is()：

判断点击的目标是否包含这些类或标签。is()只返回true/false，也可以判断“radio”是否被选中或文本框是否被禁用（disabled）如下：

$(this).is(':checked');

$(this).is(':disabled');

也可以执行自定判断方法，如下：

$('li').is(function(){

return $('li').length > 2;

});