JQuery Accordian: Понимание ссылок заголовка - PullRequest
Новая
       23

JQuery Accordian: Понимание ссылок заголовка

1 голос
/ 20 февраля 2010

Я пытаюсь выучить JQuery и испытываю трудности с пониманием процесса. Я прочитал несколько постов, и, возможно, это мое слабое понимание javascript и является помехой, но я хочу учиться. Моя цель - использовать пользовательский интерфейс Accordion для системы меню; чтобы пункты главного меню (#sidebar ul.accordion li .opener .selected) также работали как ссылки, а не только как «открывашка» для подменю (div.slide ul li a). Я перечислил сценарии HTML, CSS и JQuery ниже и думаю, что мой вопрос заключается в следующем:

В: Моя проблема в заголовке JQuery: «opener» или «event:« click »», или необходимость в «click (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"
});

1 Ответ

0 голосов
/ 20 февраля 2010

Судя по всему, вы строите древовидное меню. Таким образом, я бы сказал, что это то, что вы хотите ... вид на дерево ... не аккордеон.

В вашем примере вы устанавливаете .opener как элемент для расширения аккордеона. Вы также хотите, чтобы это была ссылка на другую страницу. Вы не можете иметь оба.

То, что вы можете попробовать, выглядит примерно так:

+ имя_ссылка

Это отделяет элемент, открывающий аккордеон, от вашей ссылки.

...