簡單實用的二級樹形選單hovertree

阿新 • • 發佈：2019-01-18

原創

hovertree是一個仿京東的樹形選單jquery外掛，暫時有銀色和綠色兩種。

官方網址：http://keleyi.com/jq/hovertree/
歡迎下載使用

檢視綠色效果：
http://keleyi.com/jq/hovertree/hovertreegreen.htm

可以設定選單寬度(width)，還可以設定是否最多隻能有一個一級選單展開(isCloseOther)。

isCloseOther的值為false 或者 true，設為true即成為手風琴選單。

使用方法可以參考以下HTML原始碼：

<!DOCTYPE html>
<html>
<head>
< 
title>hovertree</title><base target="_blank" />
<link href="http://keleyi.com/jq/hovertree/css/jquery.hovertree.css" type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" 
 src="http://keleyi.com/jq/hovertree/js/jquery.hovertree.js"></script>
</head>
<body>

<div id="keleyihovertree" class="hovertree">
<div class="item current">
<h3>
<b></b>Web前端</h3>
<ul>
<li><a href="http://keleyi.com/menu/jquery/"> 
jquery</a></li>
<li><a href="http://keleyi.com/menu/javascript/">javascript</a></li>
<li><a href="http://keleyi.com/menu/html5/">html5</a></li>
<li><a href="http://keleyi.com/menu/webqd/">web前端</a></li>
<li><a href="http://keleyi.com/jq/">jQuery外掛</a></li>
</ul>
</div>
<div class="item">
<h3>
<b></b>jQuery Plugins</h3>
<ul>
<li><a href="http://keleyi.com/keleyi/">keleyi選單</a></li>
<li><a href="http://keleyi.com/jq/randomvisit/">RandomVisit</a></li>
<li><a href="http://keleyi.com/jq/zonemenu/">ZoneMenu選單</a></li>
<li><a href="http://keleyi.com/jq/myslider/">myslider</a></li>
<li><a href="http://keleyi.com/jq/hovertree/">hovertree</a></li>
</ul>
</div>
<div class="item">
<h3>
<b></b>工具</h3>
<ul>
<li><a href="http://tool.keleyi.com/t/md5.htm">MD5加密</a></li>
<li><a href="http://keleyi.com/tool/md5.htm">MD5加密（Silverlight）</a></li>
<li><a href="http://keleyi.com/tool/htmlencode.htm">HTML編碼與解碼</a></li>
<li><a href="http://keleyi.com/tool/urldecode.htm">URL編碼與解碼</a></li>
<li><a href="http://keleyi.com/tool/regex.htm">.NET正則表示式匹配工具</a></li>
<li><a href="http://tool.keleyi.com/ip/wodeip.htm">檢視IP地址</a></li>
</ul>
</div>
</div>

<a href="hovertreegreen.htm">Green Style</a> <a href="http://plugins.jquery.com/hovertree/">download</a>

<script type="text/javascript">
$("#keleyihovertree").hovertree({ "width": "200px"});
</script>
</body>
</html>

簡單實用的二級樹形選單hovertree

原創 hovertree是一個仿京東的樹形選單jquery外掛，暫時有銀色和綠色兩種。官方網址：http://keleyi.com/jq/hovertree/歡迎下載使用檢視綠色效果：http://keleyi.com/jq/hovertree/hovertreegreen.htm可以設定選單寬度(widt

iOS-簡單的二級聯動選單

二級聯動，可以左側是一個tabview右側也是一個tabview，也可以左側一排按鈕，右側tabview，點選左側，重新整理右側資料，這一步很簡單，我當時不理解的是右側資料滑動，左側怎麼重新整理呢，這

JavaScript實際應用簡單二級聯動選單實現

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

簡單實現二級選單

這裡寫自定義目錄標題 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style&

java 遞迴查詢樹形選單結構（個人認為是最簡單的）

/** * 獲取無限級的類別資源 */ @Override public List<Object> findTypeTree() throws BusinessException

jq簡單的下拉選單，有二級欄目。

js簡單實用的垂直導航選單，滑鼠移動觸發

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

Ehcache 的簡單實用及配置

stat import create 緩沖 .org 應該單引號 ide date Ehcache 與 spring 整合後的用法，下面是一個Ehcache.xml配置文件；通用的緩存策略可以用一個 cache； 1 <?xml version="1.0"

一款簡單實用的上傳文件圖片插件並且兼容移動端zyupload.js

png http ext 選中 nis blog onf 1-1 text 1.下載zyupload插件包包含的文件如下圖： 2.在/images/fileType文件夾下定義上傳文件的顯示圖標如下圖所示： 3.打開zyupload.js，修改上傳後顯示文件圖標

如何簡單實用hammer

實用 () 簡單實用 fas r.js jquer att 如何 new 1，首先引用hammer在html中 <script src="js/jquery.hammer.js"></script> 2.在js中創建一個新的實例，並在

CURL簡單實用

而不是技術處理 man 空字符增加相關執行發送學習地址：https://yq.aliyun.com/articles/33262 curl的簡單使用步驟要使用cURL來發送url請求，具體步驟大體分為以下四步： 1.初始化2.設置請求選項3.執行一個cU

jquery $.post() 向php傳值實現簡單的二級聯動

chang var box jquer lec 簡單 cnblogs encode can 1 其中selectid是一個下拉菜單的id 2 3 $().ready(function () { 4 $("#selectid").change(functi

RequireJS簡單實用說明

routes body 現在 ltp .config 加載器 control ztree_v3 center OM前端框架說明 om前端框架采用RequireJS，RequireJS 是一個JavaScript模塊加載器。它非常適合在瀏覽器中使用, 它非常適合在瀏覽器

認識 angularjs 及 angularjs 簡單實用

scope 功能 cti spa 過濾器 pac -c 開發 oct Angular.js中，引入了專門的ViewModel（視圖模型）來實現View和Model的粘合，讓View和Model的進一步分離和解耦。優勢：　　　1、低耦合　　　2、可重用性　　　3、獨立開發　

【健康】下蹲5分鐘，等於步行1小時！最簡單實用的鍛煉方法

relative 地面提醒 mps 靈活性 ica 剛才 order 次數【健康】下蹲5分鐘，等於步行1小時！最簡單實用的鍛煉方法2017-07-19人民日報“人老腳先衰，樹枯根先竭”。如果你不想過早衰老，便要保證腳部不衰老，所謂“養生先養腳”、“腿勤人長壽”，重視腿部

C# .NET Socket 簡單實用框架

lambda 最大值 color stream 一聲之間 pro 重構 ima 背景：首先向各位前輩，大哥哥小姐姐問一聲好~ 這是我第一次寫博客，目前為一個即將步入大四的學生，上學期在一家公司實習了半年，後期發現沒有動力，而且由於薪水問題（廢話嘛），於是跳槽到這家新的公

插件kendoDatePicker的簡單實用

onchange 時間格式文字 oda 方法 cti input styles date 關於kendoDatePicker的簡單用法　　1:引用插件源　　　　<link href="../js/kendoui/styles/kendo.common.min.cs

CSS3 linear-gradient線性漸變實現虛線等簡單實用圖形

選擇 www .html path 聲明寬高不同理論存在一、作為圖片存在的CSS3 gradient漸變我覺得CSS3 Backgrounds比較厲害的一個地方就是支持多背景，也就是背景圖片個數可以無限累加，正好CSS3的gradient漸變性質是backgro

5款簡單實用的設計協作工具推薦

對設計師而言，收集和整理客戶的意見反饋、並作後續完善是必不可少的環節。而滿足客戶的需求並不是簡單的事情，如果再通過電子郵件來進行合作和分享設計思路、等待及反饋修改意見將更會是充滿煎熬和挑戰的過程。但即便如此，我們還是希望提供令客戶及自己滿意的出色設計。如今網上有很多協作類工具可幫助設計師簡

Cookie的簡單實用

域名 col fun pos res name 所有 gpo i++ 作用域：　　一個域名下的所有網頁共用一套cookie。幾個封裝好的工具方法： // 添加一個cookie function setCookie(name, value, iDay) {

簡單實用的二級樹形選單hovertree

相關推薦