javascript - 单击事件命中框功能

Question

我正在尝试制作一个固定在右侧的搜索框，当您单击它时，该搜索框会滑出到左侧。到目前为止一切顺利，但是当我希望它滑回右侧时，我并没有真正实现我想要的。现在，当您单击搜索框外部时，它会滑回来。但当我单击“#spawn_search”元素时，我希望它也滑回右侧。

我有点被这个问题困扰了。欢迎所有帮助和意见

实例:http://jsfiddle.net/GN9Zy/

<div class="search_box closed" id="search_box">
    <form action="#" method="post">
        <input type="text" name="value" />
        <div id="spawn_search"></div>
    </form>
</div>


.search_box {
    background: #f9f9f9;
    position: fixed;
    right: -214px;
    top: 25%;
    z-index: 9999;
    input[type="text"] {
        width: 207px;
        float: right;
        color: #124136;
    }
    #spawn_search {
        cursor: pointer;
        float: right;
        height: 50px;
        background: #144136;
        width: 50px;
    }
}

$(function () {
    var $parent = $('.search_box');
    $(document).on('click', function(e) {
        if (e.target.id == "search_box" || $(e.target).parents("#search_box").size()) {
            if ($parent.hasClass('closed')) {
                $parent.css('right', '0px');
                $parent.removeClass('closed');
                $parent.addClass('open');
            }
        } else {
            if ($parent.hasClass('open')) {
                $parent.css('right', '-214px');
                $parent.removeClass('open');
                $parent.addClass('closed');
            }
        }
    });
});

Answer 1

尝试

$(function () {
    var $parent = $('.search_box'), $input = $parent.find('input');

    function open(){
        $parent.css('right', '0px');
        $parent.removeClass('closed');
        $parent.addClass('open');
    }

    function close(){
        $parent.css('right', '-214px');
        $parent.removeClass('open');
        $parent.addClass('closed');
    }

    $(document).on('click', function(e) {
        var $target = $(e.target);

        if($target.closest($parent).length){
            if($target.is('#spawn_search')){
                if($parent.hasClass('open')) {
                    close();
                } else {
                    open();
                }
            }
        } else if($parent.hasClass('open')) {
            close();
        }

    });
});

http://jsfiddle.net/arunpjohny/hDALb/