如何把一个元素放在不同的地方（响应）

我想做一个响应式搜索栏，它将被放置在桌面和移动设备上的不同位置。我使用不同的ID构建了两个不同的搜索栏，分别使用display: none和display: block以及相同的jQuery代码。如何把一个元素放在不同的地方（响应）

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

2014-09-04 Leguizamo

很难说没有随附的HTML和CSS。这似乎是Jsfiddle的一个很好的候选人。（jsfiddle.net）尝试把所有的工作代码扔在那里。 – 2014-09-04 04:16:38

您不应该创建基本上相同的搜索元素的两个版本。正确的响应元素应该使用CSS媒体查询或JavaScript来操纵相同的元素，以套件浏览器宽度等。 – Papa 2014-09-04 04:25:26

我尝试使用$（“＃search”）。remove（）。insertAfter ...但它不起作用。我不知道该怎么办。 – Leguizamo 2014-09-04 04:30:16

你触发这个事件的两倍，它反转isOpen ..然后与第二点击反转它：

submitIcon.click();

所以才引发他们中的一个，你避免双重反转：

submitIcon.eq(0).click();

和它的作品

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

2014-09-04 05:57:48

太棒了。谢谢。你知道为什么第二个边栏中的输入文字被自动删除吗？ – Leguizamo 2014-09-04 06:02:38

试试这个：

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

您可能需要调整它为你的整体目的，但它可以解决你的问题，因为看到here。

2014-09-04 05:43:56 HelloWorld

我有同样创造的jsfiddle，检查它，可能它会帮助你..

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

2014-09-04 06:16:28 bharatpatel

回答