javascript - "div"JS 的显示/隐藏问题；

Question

我正在尝试使用简单的 JS 效果进行搜索，但我被困在一个地方。当我点击 .search 时，带有 .s_holder 的 div 出现，再次点击它隐藏。问题是，当我单击 input 字段或 div s_holder - 隐藏表单的 div。

<div class="search">
        <div class="s_holder">
            <form name="search" method="post" action="../test.php">
                <input type="search" name="query" placeholder="search">
            </form>
        </div>
    </div>

<script>
var a=true;
    $('.search').bind('click',function(){
        if (a==true){
        $('.s_holder').show();
            a=!a;
        }else{
            $('.s_holder').hide();
            a=!a;
        }
    });
</script>

<style>
    .search {
        background-image: url("../images/writers/search.png");
        background-repeat: no-repeat;
        float: left;
        height: 52px;
        width: 52px;
        margin-right: 2%;
    }
    .s_holder{
        display: none;
        width: 300px;
        float: left;
        background-color: rgba(17, 17, 17, 0.12);
        height: 52px;
        border-radius: 25px;
    }
    .search input[type=search]{
        margin-left: 65px;
        margin-top: 15px;
        width: 205px;
    }
</style>

Answer 1

您需要检查 e.target 属性以查看事件是否已从子元素中冒出。如果有，你可以停止执行:

var a = true;
$('.search').bind('click', function (e) {
    if (e.target != e.currentTarget) // the click bubbled 
        return;

    if (a == true) {
        $('.s_holder').show();
        a = !a;
    } else {
        $('.s_holder').hide();
        a = !a;
    }
});

Example fiddle