真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

  
  
  


   
 
 

    
這一段文字是可以折疊展開的，點擊下面的“更多”就可以展開，點擊下面的“折疊”就可以折疊
 
 

2.js代碼，最關(guān)鍵的

$(function() {
 var slideHeight = 45; // px 定義折疊的最小高度
 var defHeight = $('#wrap').height();
 if(defHeight >= slideHeight) {
 $('#wrap').css('height', slideHeight + 'px');
 $('#read-more').append('更多');
 $('#read-more a').click(function() {
  var curHeight = $('#wrap').height();
  if(curHeight == slideHeight) {
  $('#wrap').animate({
   height: defHeight
  }, "normal");
  $('#read-more a').html('折疊');
  } else {
  $('#wrap').animate({
   height: slideHeight
  }, "normal");
  $('#read-more a').html('更多');
  }
  return false;
 });
 }
});

3.css代碼

#container {
 margin: 0 auto;
 width: 600px;
 border: 1px solid #3bb2d0;
}
 
#wrap {
 position: relative;
 padding: 10px;
 overflow: hidden;
}
 
#read-more {
 padding: 5px;
 background: #fff;
 color: #333;
}
 
#read-more a {
 padding-right: 22px;
 no-repeat 100% 50%;
 font-weight: bold;
 text-decoration: none;
}
 
#read-more a: hover {
 color: #000;
}

除了使用jQuery的方式實現(xiàn)上述效果，同樣可以在Vue實現(xiàn)，下面是解決辦法：

1、創(chuàng)建collapse.js文件

const elTransition =
 "0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out";
const Transition = {
 "before-enter"(el) {
  el.style.transition = elTransition;
  if (!el.dataset) el.dataset = {};

  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;

  el.style.height = 0;
  el.style.paddingTop = 0;
  el.style.paddingBottom = 0;
 },

 enter(el) {
  el.dataset.oldOverflow = el.style.overflow;
  if (el.scrollHeight !== 0) {
   el.style.height = el.scrollHeight + "px";
   el.style.paddingTop = el.dataset.oldPaddingTop;
   el.style.paddingBottom = el.dataset.oldPaddingBottom;
  } else {
   el.style.height = "";
   el.style.paddingTop = el.dataset.oldPaddingTop;
   el.style.paddingBottom = el.dataset.oldPaddingBottom;
  }

  el.style.overflow = "hidden";
 },

 "after-enter"(el) {
  el.style.transition = "";
  el.style.height = "";
  el.style.overflow = el.dataset.oldOverflow;
 },

 "before-leave"(el) {
  if (!el.dataset) el.dataset = {};
  el.dataset.oldPaddingTop = el.style.paddingTop;
  el.dataset.oldPaddingBottom = el.style.paddingBottom;
  el.dataset.oldOverflow = el.style.overflow;

  el.style.height = el.scrollHeight + "px";
  el.style.overflow = "hidden";
 },

 leave(el) {
  if (el.scrollHeight !== 0) {
   el.style.transition = elTransition;
   el.style.height = 0;
   el.style.paddingTop = 0;
   el.style.paddingBottom = 0;
  }
 },

 "after-leave"(el) {
  el.style.transition = "";
  el.style.height = "";
  el.style.overflow = el.dataset.oldOverflow;
  el.style.paddingTop = el.dataset.oldPaddingTop;
  el.style.paddingBottom = el.dataset.oldPaddingBottom;
 }
};

export default {
 name: "collapseTransition",
 functional: true,
 render(h, { children }) {
  const data = {
   on: Transition
  };
  return h("transition", data, children);
 }
};

2、在.vue組件中引入

關(guān)于怎么在Vue中實現(xiàn)一個展開折疊效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。