1
JQuery를 배우고 프로세스를 이해하는 데 어려움을 겪고 있습니다. 나는 여러 게시물을 읽고, 어쩌면 자바 스크립트에 대한 나의 약한 이해가 방해가 되겠지만, 나는 배우고 싶다. 내 목표는 메뉴 시스템에 Accordion UI를 사용하는 것입니다. 주 메뉴 항목 (#sidebar ul.accordion li .opener .selected)이 하위 메뉴 (div.slide ul li a)의 "오프너"가 아닌 링크로 작동합니다. 아래 HTML, CSS 및 JQuery 스크립트를 나열하고 내 질문에 다음과 같습니다 생각 :JQuery Accordian : 헤더 링크 이해
Q : 내 문제는 JQuery ' 또는 'click (function() {})'이 필요합니까?
도움이 (교육) 크게 감사하겠습니다.
<div id="sidebar">
<ul class="accordian">
<li>
<a href="./mainpagelink.php" class="opener">linkname</a>
<div class="slide">
<ul>
<li><a href="subpagelink.php">sublinkname</a></li>
...
</ul>
</div>
</li>
...
</ul>
...
</div>
#sidebar {
width:210px;
float:left;
padding-top:18px;
}
#sidebar .accordion {
margin:0 0 12px;
padding:0;
list-style:none;
font-size:1.2em;/* 1.1 em */
}
#sidebar .accordion li {
border-bottom:1px solid #009;
padding:7px 0 7px 11px;
}
#sidebar .accordion a {outline-style:none;}
#sidebar .accordion a:hover {
color:#9fa714;
text-decoration:none;
}
#sidebar .accordion .ui-state-active {
display:block;
background:url(../images/arrow-rt.gif) 100% 5px no-repeat;
margin-right:11px;
color:#9fa714;
text-decoration:none;
}
#sidebar .slide {padding:1px 0 0 28px;}
#sidebar .slide ul {
margin:0;
padding:0;
list-style:none;
}
#sidebar .slide ul li {
border:0;
padding:4px 0 2px;
}
#sidebar .slide ul li.active a,
#sidebar .slide ul a:hover {
background:none;
color:#9fa714;
}
I가 다음 JQuery와 스크립트 ...
$(document).ready(function(){
$('ul.accordion').accordion({
active: ".selected",
autoHeight: false,
header: ".opener",
collapsible: true,
event: "click"
});