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

添加此代码：

$("#spawn_search").on('click', function(e) {
            if ($parent.hasClass('open')) {
                $parent.css('right', '-214px');
                $parent.removeClass('open');
                $parent.addClass('closed');
                e.stopPropagation();
            }
    });

您的所有代码都是这样的：

$(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');
            }
        }
    });

     $("#spawn_search").on('click', function(e) {
            if ($parent.hasClass('open')) {
                $parent.css('right', '-214px');
                $parent.removeClass('open');
                $parent.addClass('closed');
                e.stopPropagation();
            }
    });
});

DEMO

Answer 2

尝试

$(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/

单击事件hitbox功能

2 个答案: