[英]Make slideToggle check if div is already open, before loading ajax content into it?
[英]ajax loading file with slideToggle effect
我正在div容器中加載文本文件,到目前為止,它已經可以工作了。 我現在希望的是使用slideToggle效果對其進行動畫處理。 該網頁如下所示:
<div id="content" style="width: 75%">
<?php
foreach(new DirectoryIterator('uploads/temp') as $file)
{
if(!$file->isDot())
{
echo '<a href="#" onmousedown="javascript:ajax.query(
\'view.php?file=uploads/temp/'.$file.'\',\'file\')">'.$file.'</a> ';
}
}
?>
<div id="file" style="text-align: justify"></div>
</div>
如何將slideToggle函數應用於鏈接? 您可以在此處查看實際網頁
非常感謝
您需要將回調事件附加到您的Ajax請求中,以便幻燈片動畫只有在內容加載后才發生。 為此,使用jQuery的內置ajax和事件功能如下所示:
<?php foreach... {
// Removed onmousedown, as the event is now attached using pure jQuery
echo '<a href="#">'.$file.'</a> ';
} ?>
<script type="text/javascript">
// Attach click event listener to all links inside id="content"
$("#content a").live("click", function(e)
{
// Perform a simple Ajax call based on link contents
$.get('view.php?file=uploads/temp/'+$(this).text(), function(html)
{
// Hide div, populate content, and perform animation
$("#file")
.hide()
.html(html)
.slideDown();
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.