怎么实现默认展开第一个，并默认第一个li为选中状态，求解。

[qq_42307106]

html代码
<ul id="accordion" class="accordion">
<li>
<div class="link">西药</div>
<ul class="submenu">
<li><a href="#">感冒用药</a></li>
<li><a href="#">呼吸系统</a></li>
<li><a href="#">消化系统</a></li>
<li><a href="#">五官用药</a></li>
</ul>
</li>
<li>
<div class="link">中成药</div>
<ul class="submenu">
<li><a href="#">感冒用药</a></li>
<li><a href="#">清热解毒</a></li>
<li><a href="#">补益安神</a></li>
</ul>
</li>
<li>
<div class="link">养生保健</div>
<ul class="submenu">
<li><a href="#">保健食品</a></li>
<li><a href="#">中药饮片</a></li>
</ul>
</li>
<li><div class="link">医疗器械</div>
<ul class="submenu">
<li><a href="#">计生用品</a></li>
<li><a href="#">普通诊察</a></li>
<li><a href="#">康复器械</a></li>
<li><a href="#">医疗耗材</a></li>
</ul>
</li>
</ul>

css
body{background: #fff;
font-family:'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;}
ul{list-style-type:none;}
a{color: #e85b1e;
text-decoration:none;}
/** =======================
* Contenedor Principal
===========================*/
h1{color: #FFF;
font-size: 0.48rem;
font-weight: 400;
text-align: center;
margin-top: 1.6rem;}
h1 a{color: #c12c42;
font-size: 0.32rem;}
.accordion{width: 100%;
height: 100%;
max-width: 7.2rem;
-webkit-border-radius: 0.08rem;
-moz-border-radius: 0.08rem;
border-radius: 0.08rem;
margin-top: 0.96rem;}
.accordion .link{cursor: pointer;
text-align: center;
display: block;
background: #fff;
padding: 0.3rem;
color: #4D4D4D;
font-size: 0.28rem;
font-weight: 700;
border-bottom: 0.02rem solid #eee;
position: relative;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;}
.accordion li:last-child .link{border-bottom: 0;}
.accordion li.open .link {color: #e85b1e;}
/**
* Submenu
-----------------------------*/
.submenu{
display:none;
background: #f3f3f3;
font-size: 0.28rem;}
.submenu li{
border-bottom: 0.02rem solid #eee;}
.submenu a{display: block;
text-decoration: none;
text-align: center;
color: #666;
padding: 0.24rem;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;}
.submenu a:hover{background: #fff;
color: #e85b1e;}
.le_bl_big{width:30%;
height: 100%;
background: #f3f3f3;
float: left;}
.ri_bl_big{width: 70%;
height: 100%;
background: #f3f3f3;
float: right;}

js

$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass('open');

if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});

[天际的海浪]

<ul id="accordion" class="accordion"> <li class="open"> <div class="link">西药</div> <ul class="submenu" style="display: block;"> <li><a href="#">感冒用药</a></li> <li><a href="#">呼吸系统</a></li> <li><a href="#">消化系统</a></li> <li><a href="#">五官用药</a></li> </ul>

[丰云]

用样式控制，给第一个加上选中和展开的样式类，其他不加（保持关闭和未选中状态）就行了

[du2lon]

<ul id="accordion" class="accordion">
<li class="sel" onmouseup="sel(this)">
<div class="link">西药</div>
<ul class="submenu">
<li><a href="#">感冒用药</a></li>
<li><a href="#">呼吸系统</a></li>
<li><a href="#">消化系统</a></li>
<li><a href="#">五官用药</a></li>
</ul>
</li>
<li onmouseup="sel(this)">
<div class="link">中成药</div>
<ul class="submenu">
<li><a href="#">感冒用药</a></li>
<li><a href="#">清热解毒</a></li>
<li><a href="#">补益安神</a></li>
</ul>
</li>

<script>
function sel(A) {
var a,b,c,d,e,f,z;
a = A.parentNode;
b = a.childNodes;
c = b.length;
for(z=0; z<b; z++) {
d = b[z];
if(d.nodeType != 1) continu;
if(d.tagName=="LI") d.className = "";
}
A.className = "sel";
}
</script>

把 sel 样式设置为选中的盒子，其它的为非选中状态，当用鼠标点击哪个盒子就将该盒子的样式设为选中，其它同级的兄弟盒子设为非选中