如何将元素放在不同的地方（响应）

Question

我正在尝试创建一个响应式搜索栏，它将放置在桌面和移动设备上的不同位置。 我使用不同的ID构建了两个不同的搜索栏，display: none和display: block以及相同的jQuery代码。

我有一个问题： - 如果我点击搜索图标以外的其他部分，搜索输入不再关闭。使用一个搜索栏，当我点击任何地方时，输入会自动关闭。

使用一个搜索栏：codepen.io/anon/pen/Adgpf

有两个搜索栏：codepen.io/anon/pen/ceHmn

Answer 1

你要触发这个事件两次，它会反转isOpen ..然后在第二次点击时反转它：

submitIcon.click();

所以只需触发其中一个就可以避免双重反转：

submitIcon.eq(0).click();

并且有效

演示：http://codepen.io/anon/pen/baekD

这是最简单的解决方案。您的代码可以使用一些重构。

Answer 2

试试这个：

$(document).click(function(){
  if(!$('#sb-search').click()) {
    searchBox.removeClass('sb-search-open');
    isOpen = false;
  }
});

您可能需要根据自己的总体目的进行调整，但它可以解决您的问题here。

Answer 3

我已经创建了相同的jsfiddle，检查它，它可以帮助你..

Demo : http://jsfiddle.net/patelbharat001/w0jzzbuy/