Javascript 单击事件复选框功能

我试着制作一个固定在右边的搜索框，当你点击它时，它会滑到左边。 到目前为止还不错，但当我想让它滑回右边时，我并没有真正实现我想要的。现在，当您在搜索框外单击时，它会向后滑动。但我希望在单击“#spawn_search”（产卵搜索）元素时，它也能滑回右侧

我有点被这个问题困住了。所有的帮助和意见都是好的

实例：

.搜索框{
背景#f9f9f9；
位置：固定；
右：-214px；
最高：25%；
z指数：9999；
输入[type=“text”]{
宽度：207px；
浮动：对；
颜色：#124136；
}
#产卵搜索{
光标：指针；
浮动：对；
高度：50px；
背景：#144136；
宽度：50px；
}
}
$（函数（）{
var$parent=$（'.search_框'）；
$（文档）。在（'单击'）上，函数（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'）；
}
}否则{
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();
            }
    });

您的所有代码如下所示：

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

试试看

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

    });
});

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

    });
});