Я пытаюсь изучить JQuery и с трудом понимаю процесс. Я читал несколько сообщений, и, возможно, это слабое понимание javascript, это препятствие, но я хочу учиться. Моя цель - использовать пользовательский интерфейс Accordion для системы меню; чтобы иметь пункты главного меню (#sidebar ul.accordion li a .opener .selected) также работают как ссылка, а не как «открыватель» для подменю (div.slide ul li a). Я перечислил сценарий HTML, CSS и JQuery ниже и думаю, что мой вопрос таков:JQuery Accordian: Понимание заголовков ссылок
Вопрос: Является ли моя проблема в заголовке JQuery: или необходимость «щелчка» (function() {}) '?
Любая помощь (образование) будет принята с благодарностью.
У меня есть следующая структура меню HTML ...
<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>
У меня есть следующие CSS ...
#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;
}
У меня есть следующий скрипт JQuery ...
$(document).ready(function(){
$('ul.accordion').accordion({
active: ".selected",
autoHeight: false,
header: ".opener",
collapsible: true,
event: "click"
});