这段jquery代码,怎么改,可以实现点击后展示下一级菜单?

jianai115 发布于 2014/10/16 15:03
阅读 2K+
收藏 0
这段jquery代码,怎么改,可以实现点击后展示下一级菜单?代码原来的功能是,鼠标移动到一级菜单上面,就会把二级菜单展开,移除鼠标后,二级菜单又会收缩回去。如何用鼠标点击,来实现菜单的展开与收缩呢?
function slideNavLeft(){
	$(".left-nav-1 li").has(".left-nav-2").bind("mouseover",function(){
		if($(this).has(".left-nav-2").find(".left-nav-2").has("li").is($("ul:visible"))){			
		}
		else{
			$(".left-nav-2").has("li").slideUp(1000);	
			$(".left-nav-1 li").find("a").removeClass("cur-1");
			$(".left-nav-3").hide();
			$(this).has(".left-nav-2").find(".left-nav-2").has("li").slideDown(1000);
			$(this).find("a").first().addClass("cur-1");
		}
	})	
}
function slideNavLeft2(){
	$(".left-nav-2 li").has(".left-nav-3").bind("mouseover",function(){
		if($(this).has(".left-nav-3").find(".left-nav-3").has("li").is($("ul:visible"))){			
		}
		else{
			$(".left-nav-3").has("li").slideUp(1000);	
			$(".left-nav-2 li").find("a").removeClass("cur-2");
			$(this).has(".left-nav-3").find(".left-nav-3").has("li").slideDown(1000);
			$(this).find("a").first().addClass("cur-2");
		}
	})	
	$(".left-nav-2 li").has(".left-nav-3").bind("mouseleave",function(){
		if($(this).has(".left-nav-3").find(".left-nav-3").has("li").is($("ul:visible"))){	
			$(this).has(".left-nav-3").find(".left-nav-3").has("li").slideUp(800);
		}
		else{
		}
	})	
}
加载中
0
Canrz
Canrz

这段代码看着感觉要改还不如直接推倒重写

PS:第一眼看到题主名字还以为是jia'nai,正奇怪呢,细细一想,应该是断句jian'ai

Canrz
Canrz
回复 @jianai115 : 哎,你贴的代码看着好蛋疼,插入的时候可以选“插入程序代码或脚本”。建议你干脆直接使用jQuery的accordion ui插件算了,仿照demo的HTML结构把现在的导航条填进去。
jianai115
jianai115
能不能正视一下问题额。亲,给jia nai重写一个?jquery不会的说
0
进击的程序员
进击的程序员
把mouseover 改成 click
jianai115
jianai115
改过了,但是还是不行。改成click的效果是:滑动展开的效果没有了,但是点击后马上闪一下,菜单又合上,点一下,展开又合上的那种。
0
冬冬瓜
冬冬瓜
菜单事件是配合HTML实现的,光有脚本没有Html很难找到问题出在哪,你把完整的代码贴出来,我帮你改,是在不行,你可以去这里看看有没有你想要的: 菜单效果
jianai115
jianai115
客户所要改的就是http://www.chengroom.com/products_list.php?cid=15这个链接的,左边栏菜单,想用点击展开,滑动展开不好操控。
0
jianai115
jianai115
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>产品中心 - 浙江诚儒环境设备有限公司</title>
<meta name="generator" content="PHPMyWind CMS">
<meta name="author" content="KCCN Team">
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="CSS/cr.css">
<script type="text/javascript" src="JS/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="JS/cr.js"></script>
</head>
<!-- header -->
    <!-- header -->


<body><div class="header">
<div class="header-con">
<div class="header-top"> 
        <span class="span-1" onclick="setHomepage();">设为首页</span>
            <span class="span-2" onclick="AddFavorite();">加入收藏</span>
    </div>
        <div></div>
<div class="header-logo"><a href="index.php"></a></div>
<div class="header-nav">
<ul class="nav">
<li><a href="index.php">首页</a><span>|</span></li>
<!-- 鼠标悬浮和当前鼠标添加样式cur-nav -->
<li><a href="products_list.php?cid=1" class="cur-nav">产品中心</a><span>|</span>
                <ul class="nav-second" style="height: 300px; display: none;"><li><a href="products_list.php?cid=14">中央空调</a><ul class="nav-third" style="display: none;"><li><a href="products_list.php?cid=17">大金</a></li><li><a href="products_list.php?cid=18">格力</a></li><li><a href="products_list.php?cid=19">美的</a></li></ul></li><li><a href="products_list.php?cid=15">分体式空调</a><ul class="nav-third" style="display: none;"><li><a href="products_list.php?cid=28">大金</a></li><li><a href="products_list.php?cid=30">东芝</a></li><li><a href="products_list.php?cid=124">美的</a></li></ul></li><li><a href="products_list.php?cid=99">水机</a><ul class="nav-third" style="display: none;"><li><a href="products_list.php?cid=145">格力</a></li></ul></li><li><a href="products_list.php?cid=16">净水器</a><ul class="nav-third" style="display: none;"><li><a href="products_list.php?cid=74">前置过滤器</a></li><li><a href="products_list.php?cid=75">三级超滤净水器</a></li><li><a href="products_list.php?cid=76">全屋净水机</a></li><li><a href="products_list.php?cid=77">全屋软水机</a></li><li><a href="products_list.php?cid=78">一体式RO直饮机</a></li><li><a href="products_list.php?cid=79">两用RO直饮机</a></li></ul></li><li><a href="products_list.php?cid=93">家用电器</a><ul class="nav-third" style="display: none;"><li><a href="products_list.php?cid=94">洗衣机</a></li><li><a href="products_list.php?cid=95">冰箱</a></li><li><a href="products_list.php?cid=97">电视机</a></li><li><a href="products_list.php?cid=98">剃须刀</a></li><li><a href="products_list.php?cid=103">电饭煲</a></li><li><a href="products_list.php?cid=104">榨汁机</a></li><li><a href="products_list.php?cid=105">挂烫机和电熨斗</a></li><li><a href="products_list.php?cid=106">豆浆机</a></li><li><a href="products_list.php?cid=107">搅拌机</a></li></ul></li></ul>
                </li>
<li><a href="new_list.php?cid=13">新闻中心</a><span>|</span></li>
<li><a href="project_list.php?cid=3">案例展示</a><span>|</span></li>
<li><a href="about_chengroom.php?cid=12">关于诚儒</a><span>|</span></li>
<li><a href="hr.php?cid=5">人才招聘</a><span>|</span></li>
<li><a href="service_centre.php?cid=8">服务中心</a><span>|</span></li>
<li><a href="contact.php?cid=7">联系我们</a><span>|</span></li>
</ul>
</div>
</div>
</div>


    <script type="text/javascript">
/*当前页面导航高亮*/
var href = window.location.href.split('/')[window.location.href.split('/').length-1].substr(0,4);
if(href.length > 0){
$(function(){
$("ul.nav a[href^='"+href+"']").first().attr("class","cur-nav");
});
}else{
$(function(){$("ul.nav a:first[href^='index']").attr("class","cur-nav")});
}

//加入收藏
function AddFavorite(){
if(document.all){
try{
window.external.addFavorite(window.location.href,document.title);
}catch(e){
alert("加入收藏失败,请使用Ctrl+D进行添加!");
}
}else if(window.sidebar){
window.sidebar.addPanel(document.title, window.location.href, "");
}else{
alert("加入收藏失败,请使用Ctrl+D进行添加!");
}
}

//设为首页
function setHomepage(){
if (document.all)
{
document.body.style.behavior='url(#default#homepage)';
  document.body.setHomePage(window.location.href);  
}
else if (window.sidebar)
{
if(window.netscape)
{
try
  { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 

catch (e) 

alert( "该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true" ); 
}
}
var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components. interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage',window.location.href);
}
}
    </script>
    
   


    <!-- banner -->
    <div class="banner-2">
    <div class="banner-con-2">
    <div id="banner-box-2">
        <img src="Images/pic/banner_in.jpg">
       </div>        
        </div>
    </div>  
    <script type="text/javascript">
/*当前左导航显示*/
    var href2 = window.location.href.split('/')[window.location.href.split('/').length-1];
if(href2.length > 0){
$(function(){
//$(".left-nav-3").hide();
//$(".left-nav-1 li").has(".left-nav-2").has($("ul.left-nav-1 a[href='"+href2+"']")).find(".left-nav-2").has("li").stop(true,true).slideDown(1000);
$(".left-nav-1 li").has(".left-nav-2").has($("ul.left-nav-1 a[href='"+href2+"']")).find("a:first").addClass("cur-1");
$(".left-nav-2 li").has(".left-nav-3").has($("ul.left-nav-2 a[href='"+href2+"']")).find("a:first").addClass("cur-2");
$(".left-nav-3 li").find($("ul.left-nav-3 a[href='"+href2+"']")).addClass("cur-3");
});
}
    </script>     
    <!-- main -->
    <div class="main">
    <div class="main-01"></div>
    <div class="main-02">
    <div class="main-con">
        <div class="con-left">
            <h1 class="left-title">产品中心</h1>
                <ul class="left-nav-1">
                <li><a href="products_list.php?cid=14" class="cur-1">中央空调</a><ul class="left-nav-2" style="display: block;"><li><a href="products_list.php?cid=17" class="">--大金</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=39">&gt;F系列</a></li><li><a href="products_list.php?cid=41">&gt;苏宁专供</a></li><li><a href="products_list.php?cid=40">&gt;G系列</a></li><li><a href="products_list.php?cid=43">&gt;五星专供</a></li><li><a href="products_list.php?cid=42">&gt;国美专供</a></li><li><a href="products_list.php?cid=44">&gt;S系列</a></li><li><a href="products_list.php?cid=45">&gt;SP系列</a></li><li><a href="products_list.php?cid=46">&gt;SJ系列</a></li><li><a href="products_list.php?cid=47">&gt;PJ系列</a></li><li><a href="products_list.php?cid=48">&gt;SH系列</a></li><li><a href="products_list.php?cid=49">&gt;PH系列</a></li><li><a href="products_list.php?cid=50">&gt;A系列</a></li><li><a href="products_list.php?cid=51">&gt;B系列</a></li><li><a href="products_list.php?cid=52">&gt;L系列</a></li><li><a href="products_list.php?cid=53">&gt;H系列</a></li><li><a href="products_list.php?cid=54">&gt;SJ系列</a></li><li><a href="products_list.php?cid=55">&gt;G系列</a></li><li><a href="products_list.php?cid=56">&gt;SJ系列</a></li><li><a href="products_list.php?cid=57">&gt;帕缔能</a></li><li><a href="products_list.php?cid=58">&gt;G系列</a></li><li><a href="products_list.php?cid=59">&gt;S系列</a></li><li><a href="products_list.php?cid=60">&gt;H系列</a></li><li><a href="products_list.php?cid=61">&gt;B系列</a></li></ul></li><li><a href="products_list.php?cid=18" class="">--格力</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=23">&gt;U系列</a></li><li><a href="products_list.php?cid=24">&gt;i系列</a></li><li><a href="products_list.php?cid=62">&gt;变频系列</a></li><li><a href="products_list.php?cid=63">&gt;定频系列</a></li><li><a href="products_list.php?cid=64">&gt;1Hz系列挂机</a></li><li><a href="products_list.php?cid=65">&gt;分体挂壁式</a></li><li><a href="products_list.php?cid=66">&gt;分体立柜式</a></li><li><a href="products_list.php?cid=67">&gt;分体挂壁式</a></li><li><a href="products_list.php?cid=68">&gt;分体立柜式</a></li><li><a href="products_list.php?cid=69">&gt; 好学风</a></li><li><a href="products_list.php?cid=70">&gt;窗机</a></li><li><a href="products_list.php?cid=71">&gt;移动空调</a></li><li><a href="products_list.php?cid=72">&gt;大冷量柜机</a></li><li><a href="products_list.php?cid=73">&gt;天井机</a></li></ul></li><li><a href="products_list.php?cid=19" class="cur-2">--美的</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=25">&gt;系列1</a></li><li><a href="products_list.php?cid=26">&gt;系列2</a></li></ul></li></ul></li><li><a href="products_list.php?cid=15" class="">分体式空调</a><ul class="left-nav-2" style="display: none;"><li><a href="products_list.php?cid=28">--大金</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=108">&gt;VRV X SERIES</a></li><li><a href="products_list.php?cid=109">&gt;VRV 水源热泵系列</a></li><li><a href="products_list.php?cid=110">&gt;VRV 更新用Q系列</a></li><li><a href="products_list.php?cid=111">&gt;SkyAir Multi 系列</a></li><li><a href="products_list.php?cid=112">&gt;分体式RZQ系列</a></li><li><a href="products_list.php?cid=113">&gt;分体式RZQH系列</a></li><li><a href="products_list.php?cid=114">&gt;中/大型设备用空调(定频)</a></li><li><a href="products_list.php?cid=115">&gt;中/大型设备用空调(变频)</a></li><li><a href="products_list.php?cid=116">&gt;无人基站用空调系列</a></li><li><a href="products_list.php?cid=117">&gt;无人基站用空调系列</a></li><li><a href="products_list.php?cid=125">&gt;LP系列</a></li><li><a href="products_list.php?cid=126">&gt;PMX系列</a></li><li><a href="products_list.php?cid=127">&gt;LMX系列</a></li><li><a href="products_list.php?cid=128">&gt;VRV住宅用P系列</a></li><li><a href="products_list.php?cid=129">&gt;超级多联3MX/4MX系列 </a></li><li><a href="products_list.php?cid=130">&gt;VRV X SERIES</a></li><li><a href="products_list.php?cid=131">&gt;直流变频分体式风管机</a></li><li><a href="products_list.php?cid=132">&gt;全热交换器</a></li><li><a href="products_list.php?cid=133">&gt;多功能VRV系列</a></li><li><a href="products_list.php?cid=134">&gt;采暖MX系列</a></li><li><a href="products_list.php?cid=135">&gt;EEHS系列 </a></li></ul></li><li><a href="products_list.php?cid=30">--东芝</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=124">--美的</a><ul class="left-nav-3" style="display: none;"></ul></li></ul></li><li><a href="products_list.php?cid=99">水机</a><ul class="left-nav-2" style=""><li><a href="products_list.php?cid=145">--格力</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=146">&gt;离心机系列 </a></li><li><a href="products_list.php?cid=147">&gt;螺杆机系列</a></li><li><a href="products_list.php?cid=148">&gt;模块机系列 </a></li><li><a href="products_list.php?cid=149">&gt;户式机系列</a></li><li><a href="products_list.php?cid=150">&gt;特种机系列、冷冻冷藏系列 </a></li></ul></li></ul></li><li><a href="products_list.php?cid=16">净水器</a><ul class="left-nav-2" style=""><li><a href="products_list.php?cid=74">--前置过滤器</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=75">--三级超滤净水器</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=76">--全屋净水机</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=77">--全屋软水机</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=78">--一体式RO直饮机</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=79">--两用RO直饮机</a><ul class="left-nav-3" style="display: none;"></ul></li></ul></li><li><a href="products_list.php?cid=93">家用电器</a><ul class="left-nav-2" style=""><li><a href="products_list.php?cid=94">--洗衣机</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=100">&gt;滚筒洗衣机</a></li><li><a href="products_list.php?cid=101">&gt;全自动洗衣机</a></li></ul></li><li><a href="products_list.php?cid=95">--冰箱</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=96">&gt;三星冰箱</a></li></ul></li><li><a href="products_list.php?cid=97">--电视机</a><ul class="left-nav-3" style="display: none;"><li><a href="products_list.php?cid=102">&gt;夏普</a></li></ul></li><li><a href="products_list.php?cid=98">--剃须刀</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=103">--电饭煲</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=104">--榨汁机</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=105">--挂烫机和电熨斗</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=106">--豆浆机</a><ul class="left-nav-3" style="display: none;"></ul></li><li><a href="products_list.php?cid=107">--搅拌机</a><ul class="left-nav-3" style="display: none;"></ul></li></ul></li>                </ul>
            </div>
            <div class="con-right">
            <div class="right-title">
                <div>
                    <p>分体式空调</p>
                  </div>
                    <div class="div-2">
                    <p class="p-2"><a href="index.php">首页</a>&gt;<a href="products_list.php?cid=1">产品中心</a>&gt;<span class="last-span">分体式空调</span></p>
                </div>
              </div>
                <div class="probar">
                <ul class="pro-ul-2">
<li> 
                  <a href="products_show.php?cid=117&amp;id=579">
                        <img src="uploads/image/20130712/1373594535.jpg">
                        <p>无人基站用空调系列[各...</p>
                    </a>
</li>
<li> 
                  <a href="products_show.php?cid=116&amp;id=578">
                        <img src="uploads/image/20130712/1373598723.jpg">
                        <p>无人基站用空调系列[通...</p>
                    </a>
</li>
<li> 
                  <a href="products_show.php?cid=115&amp;id=577">
                        <img src="uploads/image/20130712/1373598887.jpg">
                        <p>中/大型设备用空调(直...</p>
                    </a>
</li>
<li> 
                  <a href="products_show.php?cid=114&amp;id=576">
                        <img src="uploads/image/20130712/1373599416.jpg">
                        <p>中/大型设备用空调&lt;定...</p>
                    </a>
</li>
<li> 
                  <a href="products_show.php?cid=113&amp;id=575">
                        <img src="uploads/image/20130712/1373595069.jpg">
                        <p>分体式RZQH系列</p>
                    </a>
</li>
<li> 
                  <a href="products_show.php?cid=112&amp;id=574">
                        <img src="uploads/image/20130712/1373599427.jpg">
                        <p>分体式RZQ系列</p>
                    </a>
</li>
                   </ul>
                </div>
                    <div class="page-list">
                        <span><a href="javascript:;" title="已是第一页" class="off">《</a><a href="javascript:;" title="已是第一页" class="off">《上一页</a><a href="javascript:;" class="on">1</a><a href="?cid=15&amp;page=2" class="num" title="第 2 页">2</a><a href="?cid=15&amp;page=3" class="num" title="第 3 页">3</a><a href="?cid=15&amp;page=4" class="num" title="第 4 页">4</a><a href="?cid=15&amp;page=2" title="下一页">下一页》</a><a href="?cid=15&amp;page=4" title="最后一页">》</a></span><select onchange="window.location.href=this.value;"><option selected="selected" value="/products_list.php?cid=15&amp;page=1">1</option><option value="/products_list.php?cid=15&amp;page=2">2</option><option value="/products_list.php?cid=15&amp;page=3">3</option><option value="/products_list.php?cid=15&amp;page=4">4</option></select>                    </div>
            </div>
<div class="clear"></div>
        </div>
    </div>
    <div class="main-03"></div>
    </div>  
    
    <!--- footer -->
    <!-- footer -->


<div class="footer">
<p class="footer-p1"> 版权所有:浙江诚儒环境设备有限公司  浙ICP备12008060号-1</p>
<p class="footer-p2">技术支持:<a href="http://www.kccn.net" target="_blank" title="杭州专业网站建设服务商" alt="网页设计">杭州金创 KCCN</a></p>
</div>
<style type="text/css">
#qq{ width:138px; height:135px; position:fixed; _position:absolute; top:130px; _top:expression((eval(document.documentElement.scrollTop))+130+"px"); right:-110px; z-index:99; }
.q_left{ width:28px; height:135px; float:left; background:url(Images/online.jpg) no-repeat center center; position:relative; cursor:pointer;}
.q_left p.online_switch{ width:38px; height:30px; position:relative; top:-15px; background:url(images/online_switch.png) no-repeat center center;}
.q_right{ width:100px; height:125px; float:right; border:5px solid #0d8e49}
.q_right p{ text-align:center; font-size:14px; color:#0d8e49; line-height:30px; border-bottom:1px solid gray;}
.q_right a{ width:100%; text-align:center; display:block; padding:5px 0;}
</style>
<div id="qq">
    <div class="q_left">
       <!-- <p class="online_switch"></p>-->
    </div>
    <div class="q_right">
    <p>QQ在线客服</p>
    <div class="kf"><div class="kf_r"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1942161146&amp;site=qq&amp;menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1942161146:41" alt="点击这里给我发消息" title="点击这里给我发消息"></a></div></div>    </div>
</div>
<script type="text/javascript">
$('div.q_left').bind('click',function(){
var condition = parseInt($('#qq').css('right'));
if(condition>=0){
$('#qq').animate({right:'-110px'});
}
else{
$('#qq').animate({right:'0px'});
}
})
</script>    






</body></html>
0
jianai115
jianai115
,HTML代码如上,好像不是很好看,顺便教下,怎么发问题,把代码提交的好看点?
0
jianai115
jianai115

这是CSS

@charset "utf-8";
/* design by:kccn.net */
*{margin:0;padding:0;}
body{font-family:"宋体";font-size:12px; line-height:22px;color:#666666}
img{border:0}
a{text-decoration:none;color:#555555; cursor:pointer}
a:hover{text-decoration:underline;}
ul,li,h1{list-style:none;margin:0;padding:0;}
.clear{clear:both;}


/*header*/
.header{width:100%;height:87px;background-image:url(../Images/bg_heder.jpg);}
.header-con{width:970px;height:87px;margin:0px auto 0px auto;position:relative;}
.header-top{position:absolute;top:0px;left:790px;}
.header-top span{display:inline-block;_display:inline;float:left;width:73px;height:24px;font-size:12px;line-height:24px;text-indent:24px;cursor:pointer;}
.header-top span.span-1{background:url(../Images/icons_home.jpg) no-repeat 0 5px;margin-right:28px;}
.header-top span.span-2{background:url(../Images/icons_add.jpg) no-repeat 0 5px;}
.header-logo{width:335px;height:87px;float:left;background-image:url(../Images/logo.jpg);}
.header-logo a{width:335px;height:87px;display:block;}
.header-nav{width:635px;height:46px;float:right;margin-top:42px;}
.nav{float:right;}
.nav li{display:inline-block;_display:inline;float:left;position:relative;}
.nav li a{width:70px;height:46px;line-height:42px;text-align:center;display:inline-block;}
.nav li a:hover,.nav li a.cur-nav,.nav li a.cur-nav2{background:url(../Images/menu_bg.jpg);text-decoration:none;}
.nav li span{color:#dcdcdc;}
.nav li .nav-second{width:700px; position:absolute;top:46px;left:0px;display:none;z-index:9; background:#dfdfdf;}
.nav li .nav-second li{width:100px;}
.nav li .nav-second li a{width:100px;height:30px;line-height:30px;text-align:center;display:block;}
.nav li .nav-second li a:hover{background:none;color:black;}
.nav li .nav-second li .nav-third{}
.nav li .nav-second li .nav-third li{display:block;height:30px;}
.nav li .nav-second li .nav-third li a{width:100px;}
.nav li .nav-second li .nav-third li a:hover{color:#006730}
/*banner*/
.banner{width:100%;height:375px;margin-top:1px;background:url(../Images/bg_banner.jpg) repeat-x; overflow:hidden}
.banner-con{width:970px;height:375px;margin:0px auto 0px auto;}
#banner-box{width:970px;height:375px;overflow:hidden;}
.switch-tab{position:relative;left:450px;top:-30px;z-index:100;}
.switch-tab a{display:inline-block;width:12px;height:10px;background:url(../Images/banner_nav_bg_02.gif) no-repeat;padding-left:5px;}
.switch-tab a.current{background:url(../Images/banner_nav_bg_01.gif) no-repeat;}

.banner-2{width:100%;height:200px;margin-top:1px;background:url(../Images/bg_banner.jpg) repeat-x;}
.banner-con-2{width:970px;height:200px;margin:0px auto 0px auto;}
#banner-box-2{width:970px;height:200px;overflow:hidden;}
/*index  main-up*/
.main-up{width:968px;height:249px;border:1px solid #d8dadc;margin:20px auto 0px auto;background:url(../Images/bg_index_mainup.jpg) repeat-x 0px 1px;}
.pro-title{width:968px;height:25px;}
.pro-title p{height:25px;line-height:30px;text-indent:23px;font-weight:bold;}
.pro-div{width:968px;margin-top:17px;}
.left{width:51px;float:left;}
.left input{width:16px;height:18px;display:block;position:relative;margin-top:73px;margin-left:24px;}

.center{width:865px;height:200px;float:left;position:relative;overflow:hidden;}
#pro-scroll{width:865px;position:relative;overflow:hidden;}
.pro-ul{width:10000px}
.pro-ul li{display:inline-block;*display:inline;float:left;}
.pro-ul-1{}
.pro-ul-1 li{width:173px;display:inline-block;*display:inline;float:left;}
.pro-ul-1 li a img{width:163px;height:163px;border:1px solid #d8dadc;}
.pro-ul-1 li a p{text-align:center;line-height:24px;}
.right{width:52px;float:left;}
.right input{width:16px;height:18px;display:block;position:relative;margin-top:73px;margin-left:9px;}
/*index  main-down*/
.main-down{width:970px;height:144px;margin:20px auto 0px auto;}
.in-title{line-height:32px;font-weight:bold;text-indent:15px;height:37px;}
.in-down{height:105px;overflow:hidden;}
.news{width:386px;height:142px;border:1px solid #dddddf;margin-right:14px;float:left;background-image:url(../Images/bg_news.gif);}
.news-li{width:342px;height:45px;border-bottom:1px dotted #dcdddf;margin-left:25px;}
.news-li p{line-height:18px;color:#999999;}
.news-li p a{color:#666666;}
.case{width:336px;height:142px;border:1px solid #dddddf;margin-right:14px;float:left;background-image:url(../Images/bg_case.gif);overflow:hidden;}
.server{width:214px;height:142px;border:1px solid #dddddf;float:left;}
.server img{display:block;}

/*main*/
.main{width:988px;margin:13px auto 0px auto;}
.main-01{width:988px;height:9px;background:url(../Images/bg_main_01.jpg) no-repeat;}
.main-02{width:988px;background:url(../Images/bg_main_02.jpg) repeat-y;margin-top:-1px;_margin-top:-4px;}
.main-con{width:968px;margin:0px auto 0px auto;}
.con-left{width:226px;margin-left:20px;_margin-left:10px;float:left;position:relative; }
.left-title{font-size:24px; font-weight:normal;color:#666666;line-height:58px;height:54px; font-family:"微软雅黑"}
.left-nav-1{width:196px;}
.left-nav-1 li{padding-bottom:10px;}
.left-nav-1 li a{width:196px;height:30px;display:block;background-color:#f2f0e3;color:#000000;font-size:14px;text-indent:12px;line-height:30px;}
.left-nav-1 li a:hover,.left-nav-1 li a.cur-1{background:url(../Images/bg_left_nav.jpg) repeat-x;color:#ffffff;text-decoration:none;}
.left-nav-2{ margin-top:20px;display:none;}
.left-nav-2 li{padding:0px;}
.left-nav-2 li a{width:180px;margin-left:16px;font-size:12px;line-height:14px;background:none;}
.left-nav-2 li a:hover,.left-nav-2 li a.cur-2{background:none;color:black;}
.left-nav-3 li{padding:0px;}
.left-nav-3 li a{width:170px;margin-left:26px;font-size:12px;line-height:14px;background:none;}
.left-nav-3 li a:hover,.left-nav-3 li a.cur-3{background:none;color:#006730;}
.con-right{width:702px;float:right;margin-right:20px;_margin-right:12px;position:relative;}
.con-right .back{ text-align:right; margin-bottom:30px;}
.con-right .back a{ color:#000; font-size:14px; padding:4px 15px; border:1px solid #dddddd;}
.con-right .back a:hover{ border-color:#666666; text-decoration:none;}
.right-title{width:702px;height:54px;border-bottom:1px solid #dcdcdc;}
.right-title div{width:302px;height:54px; float:left}
.right-title div.div-2{width:400px;height:54px; float:right}
.right-title p{line-height:65px;font-size:13px;}
.right-title div.div-2 p.p-2{float:right;}
.right-title div.div-2 p.p-2 span{ padding:0 5px;}
span.last-span{color:#006730;}

.probar{ width:100%; margin-top:20px;}
.pro-ul-2{width:100%; float:left;}
.pro-ul-2 li{float:left; margin:15px 10px;}
.pro-ul-2 li a{width:208px;border:1px solid #d7dbde; float:left;}
.pro-ul-2 li a:hover{ border-color:#046933;}
.pro-ul-2 li a img{ width:206px;height:160px; padding:1px;}
.pro-ul-2 li a p{ line-height:66px; text-align:center;}

.newbar{ width:100%;}
.newbar .title{ width:100%; line-height:30px; background:url(../Images/bg_right_01.jpg) repeat-x; color:#000000;}
.newbar .title .time{ width:100px; text-align:center; float:right;}
.newbar .title .t{ margin-left:20px;}
.newbar .newlist{ line-height:30px; margin-top:20px;}
.newbar .newlist li{}
.newbar .newlist li a{ margin-left:10px; background: url(../Images/icon_new.gif) left center no-repeat; padding-left:10px; }
.newbar .newlist span{  text-align:center; float:right;}
.newbar .newshow{ padding:20px;overflow:hidden;width:670px;}
.newbar .newshow img{max-width:670px;_width:expression(this.width>670?670:this.width)}
h2{ font-weight:normal; color:#006730; line-height:65px; font-size:14px; text-align:center;}
.pro_Parameter{ width:100%; float:left}
.pro_Parameter .left{ width:330px;}
.pro_Parameter .left img{ width:324px; height:324px; border:1px solid #dcdcdc; padding:2px;}
.pro_Parameter .right{ width:330px; margin-left:30px;}
.pro_Parameter .right .title,
.pro_detail .title{ line-height:32px; background:url(../Images/bg_right_01.jpg) repeat-x; color:#000; font-size:14px;}
.pro_Parameter .right .title span,
.pro_detail .title span{ background:url(../Images/icon_right.jpg) 0px 3px no-repeat;padding-left:10px; margin-left:10px;}
.pro_Parameter .right .con{ padding:20px;width:280px;overflow:hidden;}
.pro_detail .con{ padding:20px;width:670px;overflow:hidden;}
.pro_detail .con img{max-width:670px;_width:expression(this.width>670?670:this.width)}
.pro_detail{ width:100%; float:left; margin-top:20px;}


.page-list{width:100%;padding:45px 0px 41px 0px;text-align:center;}
.page-list a{color:#c8c8c8;padding-left:5px;}
.page-list a.on{color:#6a6a6a;}
.page-list a.off{color:#6a6a6a;}
.main-03{width:988px;height:10px;background:url(../Images/bg_main_03.jpg) no-repeat;clear:both;}
/*footer*/
.footer{width:100%;height:99px;margin-top:20px;padding-top:30px;border-top:1px solid #e0e1e4;background-color:#efeff1;}
.footer p{line-height:24px;text-align:center;}
.footer p.footer-p1{color:#666666;}
.footer p.footer-p2{color:#9c9c9c;}
/*main*/


0
jianai115
jianai115

这是完整的JS文件

// JavaScript Document
(function ($) {
    $.fn.extend({
        "nav": function (con) {
            var $this = $(this), $nav = $this.find('.switch-tab'), t = (con && con.t) || 3000, a = (con && con.a) || 500, i = 0, autoChange = function () {
                $nav.find('a:eq(' + (i + 1 === 3 ? 0 : i + 1) + ')').addClass('current').siblings().removeClass('current');
                $this.find('.event-item:eq(' + i + ')').css('display', 'none').end().find('.event-item:eq(' + (i + 1 === 3 ? 0 : i + 1) + ')').css({
                    display: 'block',
                    opacity: 0
                }).animate({
                    opacity: 1
                }, a, function () {
                    i = i + 1 === 3 ? 0 : i + 1;
                }).siblings('.event-item').css({
                    display: 'none',
                    opacity: 0
                });
            }, st = setInterval(autoChange, t);
            $this.hover(function () {
                clearInterval(st);
                return false;
            }, function () {
                st = setInterval(autoChange, t);
                return false;
            }).find('.switch-nav>a').bind('click', function () {
                var current = $nav.find('.current').index();
                i = $(this).attr('class') === 'prev' ? current - 2 : current;
                autoChange();
                return false;
            }).end().find('.switch-tab>a').bind('click', function () {
                i = $(this).index() - 1;
                autoChange();
                return false;
            });
            return $this;
        }
    });
}(jQuery));


$("document").ready(function(){
var _height = $('.nav-second').height();
$('.nav-second').css({height:_height});
scroll();
$("#button-left").bind("click",function(){
scrollLeft();
})
$("#button-right").bind("click",function(){
scrollRight();
})
slideNav();
slideNavLeft();
slideNavLeft2();
});
var  _scoll;
function scroll(){
_scoll=setInterval("scrollAuto()",30);
$("#pro-scroll").bind("mouseover",function(){
clearInterval(_scoll);
});
$("#pro-scroll").bind("mouseout",function(){
_scoll=setInterval("scrollAuto()",30);
});
}
function scrollAuto(){
var num=$("#pro-ul-1 li").length/2;
var len=$("#pro-ul-1 li").width();
var scrolllen = len*num;
if($("#pro-scroll").scrollLeft()<scrolllen){
$("#pro-scroll").scrollLeft($("#pro-scroll").scrollLeft()+1);
}
else{
$("#pro-scroll").scrollLeft(0);
}
}
function scrollLeft(){
clearInterval(_scoll);
var len=$("#pro-ul-1 li").width();
var scrollLeft = $("#pro-scroll").scrollLeft()+len;
$("#pro-scroll").animate({"scrollLeft":scrollLeft},"slow");
_scoll=setInterval("scrollAuto()",30);
}
function scrollRight(){
clearInterval(_scoll);
var len=$("#pro-ul-1 li").width();
var scrollLeft = $("#pro-scroll").scrollLeft()-len;
$("#pro-scroll").animate({"scrollLeft":scrollLeft},"slow");
_scoll=setInterval("scrollAuto()",30);
}
function slideNav(){
$(".nav li").has(".nav-second").bind("mouseover",function(){
$(this).has("ul").find("ul").has("li").show(900);
$(this).find("a").first().addClass("cur-nav2");
})
$(".nav li").has(".nav-second").bind("mouseleave",function(){
$(this).has("ul").find("ul").has("li").stop(true,true).hide("fast");
$(this).find("a").first().removeClass("cur-nav2");
})
}
function slideNavLeft(){
$(".left-nav-1 li").has(".left-nav-2").bind("mouseover",function(){
if($(this).has(".left-nav-2").find(".left-nav-2").has("li").is($("ul:visible"))){
}
else{
$(".left-nav-2").has("li").slideUp(1000);
$(".left-nav-1 li").find("a").removeClass("cur-1");
$(".left-nav-3").hide();
$(this).has(".left-nav-2").find(".left-nav-2").has("li").slideDown(1000);
$(this).find("a").first().addClass("cur-1");
}
})
}
function slideNavLeft2(){
$(".left-nav-2 li").has(".left-nav-3").bind("mouseover",function(){
if($(this).has(".left-nav-3").find(".left-nav-3").has("li").is($("ul:visible"))){
}
else{
$(".left-nav-3").has("li").slideUp(1000);
$(".left-nav-2 li").find("a").removeClass("cur-2");
$(this).has(".left-nav-3").find(".left-nav-3").has("li").slideDown(1000);
$(this).find("a").first().addClass("cur-2");
}
})
$(".left-nav-2 li").has(".left-nav-3").bind("mouseleave",function(){
if($(this).has(".left-nav-3").find(".left-nav-3").has("li").is($("ul:visible"))){
$(this).has(".left-nav-3").find(".left-nav-3").has("li").slideUp(800);
}
else{
}
})
}

0
Canrz
Canrz
<!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" />
<title>accordion</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#firstpane p.menu_head").click(function(){
		$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
	});
});
</script>
<style type="text/css">
body { margin: 10px auto; font: 75%/120% Verdana, Arial, Helvetica, sans-serif; }
.menu_list { width: 150px; }
.menu_head { padding: 5px 10px; cursor: pointer; position: relative; margin:1px; font-weight:bold; background: #eef4d3 url(left.png) center right no-repeat; }
.menu_body { display:none; }
.menu_body a { display:block; color:#006699; background-color:#EFEFEF; padding-left:10px; font-weight:bold; text-decoration:none; }
.menu_body a:hover { color: #000000; text-decoration:underline; }
</style>
</head>
<body>
<div style="float:left" >
  <p><strong> 鼠标点击 </strong></p>
  <div id="firstpane" class="menu_list">
    <p class="menu_head">Header-1</p>
    <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>
    <p class="menu_head">Header-2</p>
    <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>
    <p class="menu_head">Header-3</p>
    <div class="menu_body"> <a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a> </div>
  </div>
</div>
</body>
</html>

引入jQuery跑一下


0
冬冬瓜
冬冬瓜
简单的看了一下你的代码,如果你想改成单击展开下级菜单,首先你要改相应的样式,目前你菜单样式中把a标签设置为了display:block并且宽度为196px。这样导致无论你单击哪里都会触发超链接转到新页面, 你要改成只有单击文字(红色框)的时候转到新链接,而单击文字以外(红色框外)时执行展开收缩菜单的事件。最后把mouseover事件改成click事件,再重新整理一下相关代码应该可以实现,你不妨先试试
0
冬冬瓜
冬冬瓜
补充一下:
返回顶部
顶部