如何将元素放置在不同的位置(响应）

How to put an element in a different place (responsive)

本文关键字：位置 响应 元素      更新时间：2023-09-26

我正在尝试制作一个响应式搜索栏，它将被放置在桌面和手机的不同位置。我用display: none和display: block以及相同的jQuery代码构建了两个具有不同ID的差异搜索栏。

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

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

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

您将触发此事件两次，从而反转isOpen。。然后第二次点击将其反转：

submitIcon.click();

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

submitIcon.eq(0).click();

它的工作原理是

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

这是最简单的解决方案。您的代码可能需要进行一些重构。

试试这个：

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

你可能需要为了你的整体目的对它进行调整，但它解决了你的问题，如图所示。

我为同样的东西创建了jsfiddle，请检查一下，也许它会对你有所帮助。。

Demo : http://jsfiddle.net/patelbharat001/w0jzzbuy/
相关文章：