如何把一個元素放在不同的地方（響應）

我想做一個響應式搜索欄，它將被放置在桌面和移動設備上的不同位置。我使用不同的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

回答