搜索中...
2015/08/21

【JS】展開與收合效果

像是教學或者攻略向的文章常常有內容太多的困擾,最常見的解決方式除了分頁外,就是利用「展開與收合效果」了;這裡提供的收合效果僅需一小段JS碼就能實現。
範例展示
按此展開收合
我是展開後的內容,再按一下可以關閉。
程式碼
 首先若 尚未載入jQuery庫 請先添加。
CSS.尋找並貼在 </b:skin> 之上 、或者使用自訂的新增CSS
.code {
 color: #333;
 position: relative;
 overflow: hidden;
        text-align: center;
}
.code:hover {cursor: s-resize;}
.code c2 {
    font-weight:bold;
    color: #fff;
    font: 12px Century Gothic,微軟正黑體;
    padding: 1px 3px;
    border: 1px solid #1CB990;
    border-radius:3px;
    background-color: #1CB990;
}
.code:after {
 content: "點擊兩次關閉";
 position: absolute;
        text-align: center;
 right: 0;
 top: 100%;
 margin-top: 3px;
 color: red;
 font: 10px Century Gothic;
}
pre{
  text-align: left;
  border-radius:3px;  
  box-sizing: border-box;
  color: #8e9081; 
  font:13px Microsoft JhengHei,Century Gothic;
  line-height: 18px;
  outline: 0px;
  padding: 10px 12px;
  vertical-align: baseline;
  word-wrap: break-word;
  word-break: normal;
}
JavaScript.尋找並貼在 </head> 之下:
<script>
$(function() {
 $(".cs").hide();
 $(".code > c2").click(function() {
  $(this)
      .parent()
      .find(".cs")
      .slideToggle();
 });
});
</script>
HTML.編輯文章時開啟HTML模式貼上:
<div class="code">
<c2 >按此展開收合</c2>
<pre class="cs">內容</pre>
</div>
附加效果
若想更改滑鼠樣式,可以參照 CSS指定滑鼠游標型態。
參考來源
css-tricks.com

0 意見:

張貼留言