0

我正在尝试制作一个固定在右侧的搜索框，当您单击它时它会滑出到左侧。到目前为止一切顺利，但是当我希望它滑回右侧时，我并没有真正实现我想要的。就像现在一样，当您在搜索框外单击时，它会向后滑动。但是，当我单击“#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');
            }
        }
    });
});
4

2 回答 2

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

演示

于 2013-07-18T09:24:55.397 回答
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/

于 2013-07-18T09:31:35.420 回答