HTML页面为什么一打开ul中的li全部是展开，而不是收缩呢求大神搭救

Choimeyu 2015-11-17 03:38:47


HTML代码


<!DOCTYPE>

<html>

<head>

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

<title>left</title>

<link type="text/css" rel="stylesheet" href="css/left.css" />

<script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="javascript/menu.js"></script>

</head>



<body>

   <div class="left_menu">

				<ul id="nav_dot">

      <li>

          <h4 class="M1"><span></span>系统公告</h4>

          <div class="list-item none">

            <a href=''>系统公告1</a>

            <a href=''>系统公告2</a>

            <a href=''>系统公告3</a>

            <a href=''>系统公告4</a>

          </div>

        </li>

        <li>

          <h4 class="M2"><span></span>工单处理</h4>

          <div class="list-item none">

            <a href=''>工单处理1</a>

            <a href=''>工单处理2</a>

            <a href=''>工单处理3</a>

            <a href=''>工单处理4</a>

            <a href=''>工单处理5</a>          

           </div>

        </li>

        <li>

          <h4 class="M3"><span></span>基础教学</h4>

          <div class="list-item none">

            <a href=''>基础教学1</a>

            <a href=''>基础教学2</a>

            <a href=''>基础教学3</a>

          </div>

        </li>

				<li>

          <h4 class="M4"><span></span>评论管理</h4>

          <div class="list-item none">

            <a href=''>评论管理1</a>

            <a href=''>评论管理2</a>

            <a href=''>评论管理3</a>

          </div>

        </li>

				<li>

          <h4 class="M5"><span></span>调研问卷</h4>

          <div class="list-item none">

            <a href=''>调研问卷1</a>

            <a href=''>调研问卷2</a>

            <a href=''>调研问卷3</a>

          </div>

        </li>

				<li>

          <h4  class="M6"><span></span>数据统计</h4>

          <div class="list-item none">

            <a href=''>数据统计1</a>

            <a href=''>数据统计2</a>

            <a href=''>数据统计3</a>

          </div>

        </li>

				<li>

          <h4  class="M7"><span></span>奖励管理</h4>

          <div class="list-item none">

            <a href=''>奖励管理1</a>

            <a href=''>奖励管理2</a>

            <a href=''>奖励管理3</a>

          </div>

        </li>

				<li>

          <h4   class="M8"><span></span>字典维护</h4>

          <div class="list-item none">

            <a href=''>字典维护1</a>

            <a href=''>字典维护2</a>

            <a href=''>字典维护3</a>

						<a href=''>字典维护4</a>

            <a href=''>字典维护5</a>

            <a href=''>字典维护6</a>

						<a href=''>字典维护7</a>

            <a href=''>字典维护8</a>

            <a href=''>字典维护9</a>

						<a href=''>字典维护4</a>

            <a href=''>字典维护5</a>

            <a href=''>字典维护6</a>

						<a href=''>字典维护7</a>

            <a href=''>字典维护8</a>

            <a href=''>字典维护9</a>

          </div>

        </li>

				<li>

          <h4  class="M9"><span></span>内容管理</h4>

          <div class="list-item none">

            <a href=''>内容管理1</a>

            <a href=''>内容管理2</a>

            <a href=''>内容管理3</a>

          </div>

        </li>

				<li>

          <h4   class="M10"><span></span>系统管理</h4>

          <div class="list-item none">

            <a href=''>系统管理1</a>

            <a href=''>系统管理2</a>

            <a href=''>系统管理3</a>

          </div>

        </li>

  </ul>

		</div>

        <script>navList(12);</script>

</body>

</html>


CSS代码


@charset "utf-8";

/* CSS Document */

html,body,div,p,form,label,ul,li,dl,dt,dd,ol,img,button,h1,h2,h3,h4,h5,h6,b,em,strong,small{margin:0;padding:0;border:0;list-style:none;font-style:normal;font-weight:normal;}

dl,dt,dd{display:block;margin:0;}

a{text-decoration:none;}

body{font-family:Microsoft YaHei,Verdana,Arial,SimSun;color:#666;font-size:14px;background:#f6f6f6; overflow:hidden}

.block, #block{display:block;}

.none, #none{display:none;}

/*****头部和尾部******/

.top{height:5px;line-height:5px;background:#00a5a5;width:100%;position:fixed;z-index:255;top:79px;text-align:center;}



#header{width:100%;

	height:80px;

	margin:0px auto;

	padding:0px;

	border:1px #F00 solid;line-height:80px;background:#00a5a5;width:100%;position:absolute;text-align:center; border: #000 1px solid;}

.logo{line-height:80px;font-size:25px;color:#fff; letter-spacing:3px;float:left;width:250px;height:80px;border:1px #F00 solid;}

/*****搜索框部分******/

.searchContext{

	width:450px;

	height:80px;

	float:left;

	

	border:1px   #F00 solid;

}

.cf:before,.cf:after{

	content:"";

	display:table;

}

.cf:after{clear:both;}

.cf{zoom:1;}

/* Form wrapper styling */

.form-wrapper{

	width:400px;

	height:50px;

	padding:15px;

	margin:0 auto ; 	/**位置**/

	background:#444;

	background:rgba(0,0,0,.2);

	border-radius:10px;

	box-shadow:0 1px 0 rgba(255,255,255,2);

}

/* Form text input */

.form-wrapper input{

	width:310px;

	height:40px;

	padding:10px 5px;

	float:left;

	font:bold 15px 'lucida sans','treuchet MS','Tahoma';

	border:0px;

	background:#eee;

	

}

.form-wrapper input:focus{

	outline:0;

	background:#fff;

	

}

.form-wrapper input:-webkit-input-placeholder{

	color:#999;

	font-weight:normal;

	font-style:italic;

}

.form-wrapper input:-moz-placeholder{

	color:#999;

	font-weight:normal;

	font-style:italic;

}

.form-wrapper input:-ms-input-placeholder{

	color:#999;

	font-weight:normal;

	font-style:italic;

}

/* Form submit button */

.form-wrapper button{

	overflow:visible;

	position:relative;

	float:left;

	border:0;

	padding:0;

	cursor:pointer;

	height:40px;

	width:80px;

	font:bold 15px/40px 'lucida sans','trebuchet MS','Tahoma';

	color:#fff;

	text-transform:uppercase;

	background:#09F;

	

	

}

.form-wrapper button:hover{background:#06F;}

.form-wrapper button:active,.form-wrapper button:focus{

	background:#06F;

	outline:0;

}

.form-wrapper button:before{

	content:'';

	position:absolute;

	border-width:8px 8px 8px 0;

	border-style:solid solid solid none;

	border-color:transparent  #09F transparent;

	top:12px;

	left:-6px;

}

.form-wrapper button:hover:before{

	border-right-color:#06F;

}

.form-wrapper button:focus:before,

.form-wrapper button:active:before{

	border-right-color:#06F;

}

.form-wrapper button:-moz-focus-inner{

	border:0;

	padding:0;

}



/***********/

.navigation{color:#fff;font-size:14px;float:right;width:250px;height:80px;border:1px #F00 solid;}

.navigation ul li{height:30px;line-height:30px;text-align:center;float:left;margin-left:15px;}

.navigation ul li a{color:#fff;}

.navigation ul li a:hover{color:#32323a;}

#footer{height:50px;line-height:50px;background:#5e5e5e;width:100%;position:absolute;z-index:200;bottom:0;text-align:center;}

#footer p{text-align:center;line-height:50px;color:#fbfbfb;}

/*****主体部分******/

#content{ background:#FC0;width:100%;top:80px;position:absolute;z-index:10;bottom:50px;}

/**左侧菜单***/

.left_menu{float:left;width:300px;background:#32323a;height:100%;position:absolute;top:0;left:0;overflow:auto;}

.left_menu ul li {width:300px; display:inline; }

.left_menu ul li .list-item a{width:230px;padding-left:110px;text-decoration:none;font-size:14px;color:#f5f5f5;line-height:30px;display:block;}

.left_menu ul li a.noline { border-bottom:none; }

.left_menu ul li a:hover{ color:#fff; }

.left_menu ul li a.selected:hover { color:#fff; }

.left_menu ul li h4 { cursor:pointer; background:url(../images/bg1.png) no-repeat 270px 18px; padding-left:60px; text-decoration:none; font-size:16px; color:#f5f5f5; display:block;  line-height:48px; font-weight:normal; }

.left_menu ul li.noline { border-bottom:none; }

.left_menu ul li.selected h4 { background-position:270px -45px;background-color:#00a5a5;}

.left_menu li .list-item { padding:5px 0; position:relative; zoom:1 ;background:#11b6b6;overflow:hidden;}

.left_menu h4 span{display: block;float: left;width: 20px;height: 26px;margin-right: 10px;padding-right: 10px;background-repeat: no-repeat;margin-top: 12px;}

.M1 span{background:url(../images/ioc.png) 0 -6px;}

.M2 span{background:url(../images/ioc.png) -36px -6px;}

.M3 span{background:url(../images/ioc.png) -72px -6px;}

.M4 span{background:url(../images/ioc.png) -36px -40px;}

.M5 span{background:url(../images/ioc.png) -72px -40px;}

.M6 span{background:url(../images/ioc.png) -1px -40px;}

.M7 span{background:url(../images/ioc.png) -1px -70px;}

.M8 span{background:url(../images/ioc.png) -36px -70px;}

.M9 span{background:url(../images/ioc.png) -72px -70px;}

.M10 span{background:url(../images/ioc.png) -3px -105px;}

/***右侧内容****/

.m-right{margin-left:300px;height:100%;}

.right-nav{height:50px;border-bottom:1px solid #d1d1d1;background:#f6f6f6;}

.right-nav li{float:left;margin-left:5px;line-height:50px;color:#464646;font-size: 14px;}

.right-nav li img{position:relative;top:17px;left:15px;}

.right-nav li a{color:#464646;}

.right-nav li a:hover{color:#00a5a5; text-decoration:underline;}

.main{width:100%;height:100%;background:#f6f6f6;overflow:auto;}


JS代码
[code=javascript]
// JavaScript Document


//导航菜单
function navList(id) {
var $obj = $("#nav_dot"), $item = $("#J_nav_" + id);
$item.addClass("on").parent().removeClass("none").parent().addClass("selected");
$obj.find("h4").hover(function () {
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
$obj.find("p").hover(function () {
if ($(this).hasClass("on")) { return; }
$(this).addClass("hover");
}, function () {
if ($(this).hasClass("on")) { return; }
$(this).removeClass("hover");
});
$obj.find("h4").click(function () {
var $div = $(this).siblings(".list-item");
if ($(this).parent().hasClass("selected")) {
$div.slideUp(600);
$(this).parent().removeClass("selected");
}
if ($div.is(":hidden")) {
$("#nav_dot li").find(".list-item").slideUp(600);
$("#nav_dot li").removeClass("selected");
$(this).parent().addClass("selected");
$div.slideDown(600);

} else {
$div.slideUp(600);
}
});
}
/code]
...全文
3556 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
福尔摩斯·柯南 2017-02-18
  • 打赏
  • 举报
 回复
无法展开是怎么回事啊
lovebaby 2015-11-18
  • 打赏
  • 举报
 回复
在你要要收缩的div上加display:none试试
Charles杨 2015-11-18
  • 打赏
  • 举报
 回复
对，每次初始化全部关闭，点哪个哪个在开启。
木头海上漂 2015-11-18
  • 打赏
  • 举报
 回复
每次初始化全部关闭，再单独打开你选中的div就ok了。。。方法很多的
Geroge1226 2015-11-17
  • 打赏
  • 举报
 回复
div加个属性，display
Choimeyu 2015-11-17
  • 打赏
  • 举报
 回复
可以加你QQ，详细聊吗，我的QQ是：995884396，对JQuery不是很了解，求您搭救
天际的海浪 2015-11-17
  • 打赏
  • 举报
 回复
引用 2 楼 JINYUANCAI 的回复:
你一打开是全部内容都展开了吗，我的是全部展开。。。
我测试的是一打开全部内容就都是收缩的
Choimeyu 2015-11-17
  • 打赏
  • 举报
 回复
你一打开是全部内容都展开了吗，我的是全部展开。。。
天际的海浪 2015-11-17
  • 打赏
  • 举报
 回复
代码测试没问题啊
html5中ul什么意思,css代码中的ul和li是什么意思
代码释义1:css代码中的ul和li是什么意思- :ul是定义无序列表的样式li是列表内行的样式在HTML代码中列表是这样的列表一列表二2: HTML ul标签的什么意思？HTML ul标签的作用详解本篇文章主要的为大家讲解了关于HTML ul...
html中ul和li标签的用法
普通的显示数据的时候，ul就是项目列表，li就是列表项。可以用来显示数据。 如果用于DIV＋CSS布局的话，ul+li可以替换表格的作用，具体的设置，如果宽度高度、行间距、背景边框等需要配合CSS一起设置。 一.做...
html中写几个li标签,ul标签和li标签 li标签里面能嵌套UL标签吗?
html中的li和ul是什么标签ul li 是一个组合：是无序列表标签，在实际中用的非常多， 与之对应的是有序列表：ol li 一个无序列表： 咖啡 茶 牛奶 咖啡 牛奶 茶 咖啡 牛奶 茶html中的li和ul是什么标签？ul 是无序列表 ...
html中ul li前面小黑点样式 ul li一些样式
对于很多人用div来做网站时，总会用到，但在显示效果时前面总是会有一个小黑点，这个令很多人头痛，但又找不到要源，其它我们可以用以下方法来清除。 1、在CSS中写入代码。找到相关性的CSS，在。.li和.ul下写入list-...
ul中li水平垂直居中
我们在写轮播图时，底部的小圆点或数字会放在一个ul下li里，这时候一般都要求小圆点或数字垂直居中，今天就写一个简单的li在ul中水平垂直居中。 　轮播图一般有两种，左右轮播和上下轮播，对应的ul中的li也分为水平...
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章