jquery侧栏,js侧边栏

jquery 更改页面侧边栏 点击标题 显示颜色 消除其它的颜色显示？

$(function(){

轵城ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

$(".nav-link").click(function() {

$(this).addClass("active").siblings(".nav-link").removeClass('active');

});

});

我用jquery写了一个侧边栏，单击之后下拉，但是再单击的时候，怎样实现上拉？

$(document).ready(function(){

$("#according li").click(function(){

$(this).children("ul").slideToggle();

});

});

如何用jquery来制作侧边导航栏？

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

titlejQuery动画垂直折叠导航效果/title

style type="text/css"

.menu_list{width:268px;margin:0 auto;}

.menu_head{

height: 47px;

line-height: 47px;

padding-left: 38px;

font-size: 14px;

color: #525252;

cursor: pointer;

border-left: 1px solid #e1e1e1;

border-right: 1px solid #e1e1e1;

border-bottom: 1px solid #e1e1e1;

border-top: 1px solid #F1F1F1;

position: relative;

margin: 0px;

font-weight: bold;

background: #f1f1f1 url(images/pro_left.png) center right no-repeat;

}

.menu_list .current{background:#f1f1f1 url(images/pro_down.png) center right no-repeat;}

.menu_body{

line-height: 38px;

border-left: 1px solid #e1e1e1;

backguound: #fff;

border-right: 1px solid #e1e1e1;

}

.menu_body a{display:block;height:38px;line-height:38px;padding-left:38px;color:#777777;background:#fff;text-decoration:none;border-bottom:1px solid #e1e1e1;}

.menu_body a:hover{text-decoration:none;}

/style

/head

body

!-- 代码部分begin --

div id="firstpane" class="menu_list"

h3 class="menu_head current"哲学/h3

div style="display:block" class="menu_body"

a href=""科学技术哲学/a

a href="#"宗教学/a

a href="#"美学/a

a href="#"伦理学/a

a href="#"逻辑学/a

a href="#"外国哲学/a

a href="#"中国哲学/a

a href="#"马克思主义哲学/a

/div

h3 class="menu_head"经济学/h3

div style="display:none" class="menu_body"

a href="#"应用经济学/a

a href="#"理论经济学/a

a href="#"国民经济学/a

a href="#"区域经济学/a

a href="#"产业经济学/a

a href="#"国际贸易学/a

a href="#"劳动经济学/a

a href="#"政治经济学/a

/div

h3 class="menu_head"法学/h3

div style="display:none" class="menu_body"

a href="#"马克思主义基本原理/a

a href="#"马克思主义发展史/a

a href="#"马克思主义中国化研究/a

a href="#"国外马克思主义研究/a

a href="#"思想政治教育/a

/div

h3 class="menu_head"教育学/h3

div style="display:none" class="menu_body"

a href="#"体育人文社会学/a

a href="#"体育教育训练学/a

a href="#"民族传统体育学/a

a href="#"发展与教育心理学/a

a href="#"应用心理学/a

a href="#"教育学原理/a

a href="#"课程与教学论/a

a href="#"比较教育学/a

/div

/div

script src="js/jquery.js"/script

script

$(document).ready(function(){

$("#firstpane .menu_body:eq(0)").show();

$("#firstpane h3.menu_head").click(function(){

$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

$(this).siblings().removeClass("current");

});

$("#secondpane .menu_body:eq(0)").show();

$("#secondpane h3.menu_head").mouseover(function(){

$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");

$(this).siblings().removeClass("current");

});

});

/script

!-- 代码部分end --

/body

/html

你自己引入jQuery。还有下面这两张图片啊

当前文章：jquery侧栏,js侧边栏
本文网址：https://www.cdcxhl.com/article22/dscgdjc.html

成都网站建设公司_创新互联，为您提供微信公众号、App开发、、网站策划、响应式网站、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联