单击事件hitbox功能

Question

我试图制作一个固定在右侧的搜索框，并在您单击它时向左滑动。 到目前为止这么好，但是当我想让它滑回到右侧时，我并没有真正实现我想要的。现在，当您在搜索框之外点击时，它会滑回。但我希望它滑回也当我点击“#spawn_search“ - 元素的权利。

我有种陷在这个问题上，所有的帮助和意见welome

直播例如：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/

Answer 2

添加以下代码：

$("#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