Переключение с открытием первого элемента

91
10

Я использую функцию переключения jQuery для моей навигации. Моя проблема заключается в том, что по умолчанию все переключатели видны, но Id, как только для открытия первого, а остальные закрыты.

http://jsfiddle.net/TeDFs/1/

HTML

<div id="authors" class="widget">
<h2 class="widget-title">Authors</h2>
<div class="toggle">
<div class="submenu">
<ul>
<li>Name 1</li>
<li>Name 2</li>
<li>Name 3</li>
<li>Name 3</li>
</ul>
</div>
</div>

<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle">
<div class="submenu">
<ul>
<li>November 2012</li>
<li>Oktober 2012</li>
</ul>
</div>
</div>
</div>​

JQuery

function toggleWidgets() {
jQuery('.widget-title').addClass('plus');

jQuery('.widget-title').click(function() {
$(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
});
}

jQuery(document).ready(function() {
toggleWidgets();
} )​

CSS

body {
font-size: 0.875em;
line-height: 1.5em;
}

h2 {
font-size: 1.25em;
}

.plus {
background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
padding: 0 0 0 12px;
}
.minus {
background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
padding: 0 0 0 12px;
}

Heres обновленный код: первый переключатель открыт, второй закрыт.

http://jsfiddle.net/TeDFs/4/

HTML (Изменен вид widget-title класса первого элемента в widget-title-visible для инверсии стрелок, добавлен класс, hidden во второй элемент, чтобы закрыть его)

<div id="authors" class="widget">
<h2 class="widget-title">Authors</h2>
<div class="toggle">
<div class="submenu">
<ul>
<li>Name 1</li>
<li>Name 2</li>
<li>Name 3</li>
<li>Name 3</li>
</ul>
</div>
</div>

<div id="archives" class="widget">
<h2 class="widget-title">Archiv</h2>
<div class="toggle hidden">
<div class="submenu">
<ul>
<li>November 2012</li>
<li>Oktober 2012</li>
</ul>
</div>
</div>
</div>​

jQuery (Добавлены обратные события для widget-title-visible класса)

function toggleWidgets() {
jQuery('.widget-title').addClass('plus');

jQuery('.widget-title-visible').addClass('minus');

jQuery('.widget-title-visible').click(function() {
$(this).toggleClass('minus').toggleClass('plus').next().toggle(180);
});

jQuery('.widget-title').click(function() {
$(this).toggleClass('plus').toggleClass('minus').next().toggle(180);
});
}

jQuery(document).ready(function() {
toggleWidgets();
} )​

CSS (Добавлен класс hidden, обратного фона в классифицированных plus и minus)

.hidden{
display: none;
}

.plus {
background: url(http://moargh.de/daten/sidebar_arrows.png) 0 5px no-repeat;
padding: 0 0 0 12px;
}
.minus {
background: url(http://moargh.de/daten/sidebar_arrows.png) 0 -10px no-repeat;
padding: 0 0 0 12px;
}

спросил(а) 2012-11-03T20:54:00+04:00 7 лет, 11 месяцев назад
1
Решение
99

Создайте имя стиля .hidden:

.hidden{
display:none;
}

И примените к вашему div div, как это: <div class="toggle hidden"> Наконец, инвертируйте поведение ваших стрелок (плюс и минус)

Обновленная скрипка: http://jsfiddle.net/TeDFs/3/

ответил(а) 2012-11-03T22:42:00+04:00 7 лет, 11 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема