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

Question

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);
});

Answer 1

<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>

Answer 2

<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 样式设置为选中的盒子，其它的为非选中状态，当用鼠标点击哪个盒子就将该盒子的样式设为选中，其它同级的兄弟盒子设为非选中