亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

slideToggle 然后動態創建內容和 slideToggle 返回的正確方法

slideToggle 然后動態創建內容和 slideToggle 返回的正確方法

波斯汪 2023-05-19 16:13:16
我有一個包含一些元素的 div。當用戶選擇一個按鈕時,div 將被清除并動態填充新內容。我在清除 div 之前和填充它之后運行 slideToggle。隱藏 div 的第一個切換工作正常。第二個 slideToggle 沒有運行(新的 div 只是加載而沒有動畫)。我花了幾個小時嘗試不同的事情(回調函數、.on、承諾、將第二個 slideToggle 函數放在代碼的不同部分,等等)。我終于通過使用 1 毫秒的 setTimeout 來讓它工作。盡管它有效,但我比以往任何時候都更加困惑,并且質疑我生活中的一切。請幫助我了解發生了什么。工作代碼:changeCat:function(catName){    domObject.$positionsDiv.slideToggle(function(){        domObject.$positionsDiv.html('');        let yourCategories = getSubFolders(catName+"/");        if(catName==='s'){            tSCat.drawCats(yourCategories);        } else if(catName==='g'){            tGCat.drawCats(yourCategories);        }        setTimeout(function (){            domObject.$positionsDiv.slideToggle(function(){                resizeCanvas()            });        }, 1)    });},真正讓我困惑的是,如果我控制臺記錄目標 div 的高度。我希望最后調用的控制臺日志(“高度 5”)首先被調用。div 高度(“高度 3”)是在我調用第二個切換之前完全填充的 div 的高度(那么為什么它不起作用?)。非工作代碼(無超時,帶有控制臺日志)changeCat:function(catName){    domObject.$positionsDiv.slideToggle(function(){        console.log('height 1: ' + domObject.$positionsDiv.height())        domObject.$positionsDiv.html('');        console.log('height 2: ' + domObject.$positionsDiv.height())        let yourCategories = getSubFolders(catName+"/");        if(catName==='s'){            tSCat.drawCats(yourCategories);        } else if(catName==='g'){            tGCat.drawCats(yourCategories);        }        console.log('height 3: ' + domObject.$positionsDiv.height())            domObject.$positionsDiv.slideToggle(function(){                console.log('height 4: ' + domObject.$positionsDiv.height())                resizeCanvas()            });    });    console.log('height 5: ' + domObject.$positionsDiv.height())},控制臺日志按此順序返回,具有以下值:height 5: 359.333 height 1: 2214 height 2: 0height 3: 3744height 4: 324
查看完整描述

1 回答

?
心有法竹

TA貢獻1866條經驗 獲得超5個贊

“傳統”方式是將“顯示”代碼放在“隱藏”回調中:


$("#d").slideToggle(function() {

  $(this).html("a<br/>b<br/>c<br/>");

  $(this).slideToggle()

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='d'>

  1<br/>2<br/>3<br/>

</div>

在 1 毫秒超時后調用“show”與立即調用“show”時發生的情況相同。

.slideToggle()使用.animate()并且.animate()同一 DOM 節點上的每個調用都會排隊。那么會發生什么:

  • 你的“隱藏”開始

  • “表演”正在排隊

  • 隱藏完成并調用回調在“不可見”時設置內容

  • 演出自動出隊

$("#d").slideToggle(function() {

  $(this).html("a<br/>b<br/>c<br/>");

});

$(this).slideToggle()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='d'>

  1<br/>2<br/>3<br/>

</div>


查看完整回答
反對 回復 2023-05-19
  • 1 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號