2. 程式人生 > >jquery實現更多內容效果

jquery實現更多內容效果

阿新 • • 發佈：2019-01-18 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery實現收起展開功能 - 何問起</title><base target="_blank" />
<meta charset="utf-8"
 
 />
<style>
a{color:darkgreen}
.hovertreeContent{width:300px;text-indent:2em;margin:5px auto;height:60px;overflow:hidden;position:relative;border:1px solid silver;}
.hewenqiToggle{height:20px;background-color:#f0f0f0;border-top:1px solid silver;position:absolute;bottom:0px;width:100%;}
.triangle-down-hovertree 
 
{ width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #999;position:absolute;right:0px;left:0px;margin:0px auto; top:2px;cursor:pointer;}
.triangle-up-hovertree { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent
 
; border-bottom: 16px solid #999; position:absolute;right:0px;left:0px;margin:0px auto;top:2px; }
</style>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>

</head>
<body>
<div style="width:730px;margin:0px auto;text-align:center;">
<h2>jQuery實現收起展開功能</h2>
<a href="http://hovertree.com/h/bjaf/6sm1esjw.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
</div>
<div class="hovertreeContent">
受到網店的影響，服裝店的生意逐漸有所下降，老闆找何問起去談，大概是準備跟上網購潮流，讓何問起準備一下，
要在網上開網店，要為服裝店建立網站。
何問起也沒說自己經驗不足，只說會積極準備。於是抓緊時間查詢資料，學習練習。
<div class="hewenqiToggle"><span class="triangle-down-hovertree"></span></div>
</div>
<script>
$(".hewenqiToggle").on("click", function () {
if ($(".hewenqiToggle").css('position') == "absolute") {
$(".hovertreeContent").height("auto");
$(".hewenqiToggle").css({ "position": "relative" });
$(".hewenqiToggle").find("span").removeClass('triangle-down-hovertree').addClass('triangle-up-hovertree');
}
else
{
$(".hovertreeContent").height("60");
$(".hewenqiToggle").css({ "position": "absolute" });
$(".hewenqiToggle").find("span").removeClass('triangle-up-hovertree').addClass('triangle-down-hovertree');
}
})
</script>
</body>
</html>

相關推薦

jquery實現更多內容效果

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" con

ios開發之--UIDocumentInteractionController的使用（實現更多分享服務）

void cnblogs 實例 內容 main 華麗 例如 一個 img 最近在做項目的時候，碰到這樣一個需求，就是本地生成pdf文件，然後本地打開，經過測試發現，pdf文件是無法保存到相冊裏面的，只能存到手機裏面，鑒於蘋果的存儲機制，需要取出來，進行本地展示，可以直接傳到

使用JQuery實現圖片輪播效果

left 簡述 flow href 集合 jpg -i round 輪播 【效果如圖】 【原理簡述】 這裏大概說一下整個流程： 1，將除了第一張以外的圖片全部隱藏， 2，獲取第一張圖片的alt信息顯示在信息欄，並添加點擊事件 3，為4個按鈕添加點擊偵聽，點擊相應的按鈕，用

jquery 實現簡單的手風琴效果

PE charset ML wid 圖片 eight list true 效果 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

第5章 變量的更多內容

var 定義 枚舉類 ase 隱式轉換 就是 dna foreach ima 1 類型轉換 1)隱式轉換：隱式轉換不需要做任何工作，也不需要另外編寫代碼。 　　　　　　var1 = var2; 這就是隱式轉換。 2)顯式轉換：明確要求編譯器把一種數據類型轉換為另一種數

鬥魚擴展--讓你看到更多內容(七)

文件中 ESS .get 字符串 交互操作 btn element sta 廣告 代碼可以在 https://pan.baidu.com/s/1uN120-18hvAzELpJCQfbXA 處下載 下面我們一步優化頁面，在一個頁面上減少 廣告的同時，也能獲取更多的信息

jQuery實現輪播圖效果

代碼實現 idt 代碼 out 顯示 move posit 技術 輪播圖 任務實現：用jQuery實現輪播圖。 來自瓶子啊之小白，歡迎來訪，歡迎指導。 相信大家從事前端的開發者初級就是輪播圖，首先我用jquery寫了一個，第二篇我會用原生JavaScript給大家展示。其原

jQuery實現導航選單伸縮效果

效果描述：若選單未展開點選則顯示子選單，否則將子選單上卷收縮，同時菜單方向圖示進行改變   <!--left_menu star--> <div class="leftMenu" id="leftmenu"> <div cla

jquery實現導航吸頂效果

jquery實現導航吸頂效果，主要通過監聽頁面滾動事件和獲取頁面各引數實現，可參考我的部落格《使用原生js獲取頁面資訊》和jquery手冊 <!DOCTYPE html> <html> <head lang="en"> <meta cha

jQuery實現QQ分組列表效果

一、實現效果 1.未點選分組標題之前，所有成員都隱藏 2.點選分組標題之後，隱藏的要顯示，已經顯示的要隱藏 3.在點選一個分組標題時，其他已經展開的分組，要隱藏 二、程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0

JQuery實現文字無縫滾動效果(Marquee外掛)

                推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo使用方法如下：1、載入javascript。<scripttype="te

【程式設計師江湖】更多內容請關注微信公眾號：程式設計師江湖 | 收穫BAT頭條網易等大廠研發offer的校招老司機，專注於分享校招乾貨與技術文章。包括但不限於：求職準備，網申技巧，筆經面經，簡歷指南等內容。更有Java學習指南，技術面試知識點等方面的文章，偶爾

程式設計師江湖 更多內容請關注微信公眾號：程式設計師江湖 | 收穫BAT頭條網易等大廠研發offer的校招老司機，專注於分享校招乾貨與技術文章。包括但不限於：求職準備，網申技巧，筆經面經，簡歷指南等內容。更有Java...

JQuery實現文字無縫滾動效果 Marquee外掛

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。 此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。 官方演示，如下： Demo 使用方法如下： 1、載入javascript。 &

更多內容請訪問我的個人官方網站www.huqi.tech

括號匹配演算法在各種程式設計的IDE工具中都會用到，用來檢測關於括號匹配的語法錯誤，括號匹配實際上不復雜，主要就是利用棧這個資料結構，掃描輸入的字串，若遇到左括號則直接入棧，若遇到右括號則彈出棧頂括號，看是否與當前括號型別相同（如同為小括號()，或同為[]，注意括號應該是在

【學無止境的專欄】更多內容，請訪問 http://dingxiaowei.cn

關於我 我叫小未，網名Aladdin，主做U3D遊戲程式，不甘於平庸，喜歡嘗試，喜歡研究計算機技術，閒暇時間做過麥子學院線上講師，做過獨立開發，做過C#遊戲伺服器和.NET Web伺服器，做過IOS原生開發，愛遊戲，愛coding！ 郵件：[email

更多內容請訪問我的個人官方網站www.huqi.tech（為今天工作，為明天投資，為未來孵化一些東西）

安卓進階核心知識詳解 通過程式示例或者原始碼的方式來詳細講解安卓中的一些具備難度的高階知識，如通過程式示例講解Fragment生命週期，Service詳細講解，通過原始碼解析講解安卓訊息迴圈機制，IPC機制之Binder，安卓記憶

程式設計師江湖（更多內容請關注微信公眾號：程式設計師江湖 | 收穫BAT頭條網易等大廠研發offer的校招老司機，專注於分享校招乾貨與技術文章。包括但不限於：求職準備，網申技巧，筆經面經，簡歷指南等內容。更有Java學習指南，技術面試知識點等方面的文章，偶爾分

Spring與SpringMVC原始碼解析 本專欄主要講解Spring和SpringMVC的實現原理。 Spring是最流行的Java框架之一。本專欄文章主要包括IOC的實現原理分析，AOP的實現原理分析，事務的實現原始碼分析等

利用JQuery實現更簡單的Ajax跨域請求

<html><head><title>JQuery學習</title><script src="jquery-1.2.6.min.js" type="text/javascript"></script><script type="t

基於JSON+JQuery實現的多條件篩選功能(類似京東和淘寶功能)

/**  * Author:mengbing  *   * Date:2017-12-08  * http://www.allenyMiky.com  *   */ (function ($) {     //初始化繫結事件     $(function () {             });     $.

Android自定義EditText，實現分割輸入內容效果

例如，輸入一組25位的序列號，希望分成5組，每組5個數字。效果如下圖。 Android中沒有發現類似的空間，只好自己動手了。 1.首先自定義控制元件繼承EditText，實現相應方法。  Java程式碼   package com.example.sequencenu