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

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

根據復選框值切換 div - 帶動畫

根據復選框值切換 div - 帶動畫

忽然笑 2023-11-02 21:29:28
我有一個復選框,單擊該復選框時使用 jQuery 函數顯示/隱藏 div 的內容。我需要 div 向下滑動(擴大屏幕)而不是僅僅出現。jQuery:<script>$(function () {    $('#toggle1').change(function () {                        $('#details1').toggle(this.checked);    }).change(); //ensure visible state matches state of checkbox on page load    });</script>如果選中復選框 (toggle1),則顯示 div (details1),反之亦然。動畫效果放在哪里?
查看完整描述

1 回答

?
瀟瀟雨雨

TA貢獻1833條經驗 獲得超4個贊

SlideToggle 無法按預期工作。它忽略復選框狀態


確實如此,因為slideToggle()令人煩惱的是,它不以同樣的方式接受布爾值toggle()。因此,您需要檢查復選框的狀態并單獨使用slideDown()和。slideUp()


當頁面加載時,會顯示 div,我需要將其隱藏,并且僅在選中復選框時才顯示


在這種情況下,使用 CSS 隱藏加載時的元素,因為它不需要像 JS 那樣首先加載頁面。如果您想在加載時顯示內容而不使用幻燈片動畫,請使用show().


這是一個完整的工作示例:


jQuery($ => {

  let $toggle =$('#toggle1').change(e => {    

    $('#details1')[e.target.checked ? 'slideDown' : 'slideUp']();

  })

  

  if ($toggle.is(':checked'))

    $('#details1').show();

});

#details1 {

  display: none;

}

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

<input type="checkbox" id="toggle1" checked />

<div id="details1">Lorem ipsum dolor sit consectetur adipiscing elit</div>


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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