jquery多個滑鼠移上顯示下拉選單
jquery多個滑鼠移上顯示下拉選單:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="imagetoolbar" content="no" />
<title> demo </title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function ($){
//$(".subCategory").hide();
$(".down").each(function(i,obj){
$(obj).hover (
function(){$(this).find(".subCategory").stop(true,true).slideDown();},
function(){$(this).find(".subCategory").stop(true,true).fadeOut();}
);
});
});
//-->
</script>
<style type="text/css">
#nav{list-style:none;}
.menu{float:left; padding:5px; border:1px solid #ccc; background: #eaeaea; margin:0 5px;}
.subCategory{display:none;}
</style>
</head>
<body>
<div id="navBox">
<ul id="nav">
<li class="menu down">一級選單 沒有子分類</li>
<li class="menu down">一級選單 有子分類
<ul class="subCategory">
<li class="subMenu">二級選單專案</li>
<li class="subMenu">二級選單專案</li>
<li class="subMenu">二級選單專案</li>
</ul>
</li>
<li class="menu">一級選單 沒有子分類</li>
<li class="menu down">一級選單 有子分類
<ul class="subCategory">
<li class="subMenu">二級選單專案</li>
<li class="subMenu">二級選單專案</li>
<li class="subMenu">二級選單專案</li>
</ul>
</li>
<li class="menu">一級選單 沒有子分類</li>
</ul>
</div>
</body>
</html>
相關文章
- css+jquery滑鼠滑過,顯示下拉選單效果CSSjQuery
- 滑鼠移上去出現下拉選單
- 滑鼠經過顯示下拉選單
- HTML+CSS+JQuery實現下拉選單滑鼠懸浮顯示下拉選單,取消隱藏HTMLCSSjQuery
- jquery-滑鼠經過導航條,顯示二級下拉選單jQuery
- js css滑鼠懸停顯示下拉選單JSCSS
- bootstrap 選單導航選單nav li滑鼠移入hover下拉顯示boot
- 網頁導航欄滑鼠移上去自動彈出下拉選單網頁
- 在頂部顯示下拉選單
- CSS: hover選擇器的使用(實現滑鼠懸浮效果,滑鼠移上去div顯示)CSS
- 滑鼠滑過,展示下拉選單
- CSS滑鼠懸停下拉顯示內容CSS
- jQuery 二級下拉選單jQuery
- antd design Menu選單下拉回撥以及下拉選單時只能顯示一個列表,其餘關閉
- css滑鼠懸浮下拉選單效果CSS
- jQuery 美化select下拉選單jQuery
- jQuery自定義多選下拉框jQuery
- JavaScript滑鼠懸浮出現下拉選單效果JavaScript
- kendoUI 多選下拉選單 kendoMultiSelectUI
- jQuery與CSS二級下拉選單jQueryCSS
- jquery如何操作select下拉選單jQuery
- 滑鼠懸浮緩慢下拉導航選單
- jQuery滑鼠懸停顯示提示資訊視窗jQuery
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- 多個下拉去重,jQuery實現jQuery
- jQuery select下拉選單復位效果jQuery
- jQuery操作select下拉選單程式碼jQuery
- jquery操作select下拉選單簡單介紹jQuery
- 滑鼠懸浮出現下拉選單程式碼例項
- css滑鼠懸浮二級下拉導航選單CSS
- 如何設定select下拉選單option項顯示的數目
- 淺析VB.NET實現下拉選單的折行顯示
- Html中滑鼠懸停顯示二級選單的兩種方法HTML
- 【前端積累】二級選單,滑鼠滑過的時候子選單顯示,當滑鼠離開的時候子選單隱藏...前端
- 點選日曆顯示日期jqueryjQuery
- jQuery 下拉選單選擇 載入 (練手例項)jQuery
- jQuery 淡入淡出效果下拉導航選單jQuery
- jquery實現四級級聯下拉選單jQuery