在jquery中滑動div

我想在我的網站頂部製作一個工具欄類型部分。我只需要一個將默認隱藏的div，以及一個掛在該div底部的按鈕。當它被點擊時，div應該向下滑動（按鈕仍然在底部）。點擊後，它應該滑回去。在jquery中滑動div

這是我目前有：

<div id="account_toolbar" style="background-color:#fff;"> 
    <div id="toolbar_contents" style="display:none;"> This is the account toolbar so far 
    </div> 
    <div id="button" style="background-color: #ff0000;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div> 
</div>

圖像的代碼使用的Ruby/Rails的語法，所以不注意這一點。它將像其他圖像標籤一樣呈現。

這裏是我使用的jQuery的：

$('#my_account_btn').click(function() { 
    $('#toolbar_contents').slideToggle(); 
});

所以，這實際上是工作的大部分。然而，我的問題是，工具欄內容div所在的間距將按下帳戶按鈕。當它向上或向下滑動時，它會暫時附着到div的底部，然後在完成滑動時向下跳躍（在隱藏div的底部和帳戶按鈕的頂部之間留下間隙）。

我希望這是有道理的。

感謝

來源

2012-10-12 Sean

好吧，你們給了我一些想法，謝謝！

最後修復它的是底部div（持有圖像/按鈕的那個）到按鈕的高度。之前，div沒有顯示，瀏覽器中的最終高度爲0px。

<div id="account_toolbar" style="background-color:#fff;"> 
    <div id="toolbar_contents" style=""> This is the account toolbar so far 
    </div> 
    <div id="button" style="background-color: #ff0000; height:59px;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div> 
</div>

紅色的風格背景顏色以前沒有顯示過。我暫時在那裏看到div出現在哪裏。

無論如何，再次感謝你們！

來源

2012-10-12 03:33:54 Sean

這是因爲你沒有指定你的一些元素的寬度，就可以申請浮動，以便它是完整的。嘗試得到這個想法。

<style> 
#account_toolbar{ 
    width:500px; 
} 
.toolbar_contents_wrapper{ 
    float:left; 
    width:400px; 
    height:100px; 
} 
#button{ 
    float:left; 
    width:300px; 
} 

.clear{ 
    clear:both; 
} 
</style> 


<div id="account_toolbar" style="background-color:#fff;"> 
    <div class="toolbar_contents_wrapper"> 
    <div id="toolbar_contents" style="display:none;"> This is the account toolbar so far 
    </div> 
</div> 
<div class="clear"></div> 
<div id="button" style="background-color: #ff0000;"><img src="#" id="my_account_btn" style="float: right; margin-right: 100px;" /></div> 
</div> 


<script> 
$(function(){ 
    $('#my_account_btn').click(function() { 
    $('#toolbar_contents').slideToggle(); 
}); 
}); 
</script>

注意.toolbar_contents_wrapper這會阻止您的按鈕向上/向下移動。我測試了這個代碼，它工作。

來源

2012-10-12 02:24:17 loQ

我需要按鈕直接位於toolbar_contents div的下方，而不是右側。我試圖在div上添加100％的寬度，但它沒有解決任何問題。謝謝回覆。 – Sean

我更新了代碼，以便按鈕不會向上/向下移動。我已經測試過它，它工作。 – loQ

請嘗試刪除display:none，而不是在您的文檔上加載運行.hide（）。以下是在我的網站上運行的代碼。

$(document).ready(function() { 
$('#toolbar_contents').hide(); 
    $('#my_account_btn').click(function() { 
    $('#toolbar_contents').slideToggle(400); 
    return false; 
    }); 
});

來源

2012-10-12 02:25:46

不幸的是，這種做法是一樣的。我可能沒有解釋得很好，但頂部的div有應該隱藏的工具欄內容。底部div只是按住按鈕。有可能有更好的方法來做到這一點..我只是想不到一個。謝謝您的幫助！ – Sean

在jquery中滑動div

回答

相關問題