如何把一个元素放在不同的地方(响应)
问题描述:
我想做一个响应式搜索栏,它将被放置在桌面和移动设备上的不同位置。 我使用不同的ID构建了两个不同的搜索栏,分别使用display: none
和display: block
以及相同的jQuery代码。如何把一个元素放在不同的地方(响应)
我有一个问题: - 如果我点击搜索图标以外的其他部分,搜索输入不会再关闭。使用一个搜索栏,当我点击任何地方时,输入会自动关闭。
有了一个搜索栏:codepen.io/anon/pen/Adgpf
使用两个搜索栏:codepen.io/anon/pen/ceHmn
答
你触发这个事件的两倍,它反转isOpen
..然后与第二点击反转它:
submitIcon.click();
所以才引发他们中的一个,你避免双重反转:
submitIcon.eq(0).click();
和它的作品
演示:http://codepen.io/anon/pen/baekD
这是最简单的解决方案。你的代码可以使用一些重构。
+0
太棒了。谢谢。你知道为什么第二个边栏中的输入文字被自动删除吗? – Leguizamo 2014-09-04 06:02:38
答
试试这个:
$(document).click(function(){
if(!$('#sb-search').click()) {
searchBox.removeClass('sb-search-open');
isOpen = false;
}
});
您可能需要调整它为你的整体目的,但它可以解决你的问题,因为看到here。
答
我有同样创造的jsfiddle,检查它,可能它会帮助你..
Demo : http://jsfiddle.net/patelbharat001/w0jzzbuy/
很难说没有随附的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