Javascript使一個組件動態地跟隨另一個

我有一個動態呈現的div /跨度需要遵循特定的組件，例如，一個文本框。目前它被設置爲頁面上的特定座標，並且顯示爲正好出現在文本框下方。但當文本框上方的div被摺疊/展開時（即它位於文本框之上/之下）時，它不再以這種方式出現。Javascript使一個組件動態地跟隨另一個

將它看作搜索結果區域，該區域在單擊搜索按鈕後出現在搜索結果框下方，但搜索結果區域在搜索文本框上方的隨機div摺疊/展開時移動。

我很確定有一點JavaScript可以解決這個問題。我嘗試了谷歌搜索，但努力想出體面的關鍵字（和我的搜索短語沒有真正回報我很多）。

問題中的div/span動態呈現在jQuery中。我想知道快速解決方案是什麼樣的？

謝謝。

來源

2011-02-16 BeraCim

任何代碼？圖？錯誤？究竟是什麼問題，你的問題有點含糊不清。 – 2011-02-16 00:49:34

我「認爲」我理解你的問題......你能不能把文本框和div/span包裹在另一個div和position中，而是這樣呢？

javascript解決方案並不是非常漂亮，因爲每當另一個div崩潰或頁面上會影響文本框位置的任何更改時，您都必須重新定位「results」div。如果這是你想要做的，那麼你可以使用offset（）函數。

var myInputOffset = $('#MyTextBoxID').offset(); // Get the position of the input field relative to the document 
$('#MyDivID').css({top: myInputOffset.top + 50; left: myInputOffset.left }); // Position the div

NB：在div應定位絕對和50是低於輸入域轉移下來的任意數量。

來源

2011-02-16 01:32:14

感謝您的代碼。我幾乎有這樣的事情，結果是我描述它的方式：當搜索材料上方的div展開/摺疊時，搜索結果框似乎保持靜止，或者當我上下滾動頁面時「浮動」。如果我刷新頁面，則搜索結果框會自己重新定位。我希望搜索結果框始終保持在搜索文本框下方，而不管搜索區域上方的內容是否摺疊/展開。我正在考慮在JavaScript中將一些代碼放入事件中，但是......沒有這樣的事件符合法案。 – BeraCim 2011-02-16 03:49:46

你想要的東西，如：

$('<div>Search completed</div>').insertAfter('#searchBox');

這將<textarea>與「搜索框」的ID後立即插入DIV。

來源

2011-02-16 01:25:38 Neil

對於文本框和搜索結果區域上方的div，當它「縮水」而不是根本不存在時，將其隱藏。我認爲這可能有助於保持現狀。

聽起來好像文本框保持在同一個位置，底部div將會出現？如果是這樣，文本框中是否有任何可能使其表現的方式？（或者是文本框向上移動並且底部div的甚至更高的？）

Also see CSS position property

固定 - 生成一個絕對定位元件，定位相對於瀏覽器窗口。該元素的位置與「左」，「頂」，「右」，並指定的「底部」的屬性

你可以用它來保持你的底，無論什麼是它周圍改變DIV定位。

來源

2011-02-16 01:32:42

Javascript使一個組件動態地跟隨另一個

回答

相關問題