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

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é)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。