JQuery аккордеон с несколькими элементами UL - PullRequest
Новая
       34

JQuery аккордеон с несколькими элементами UL

0 голосов
/ 28 августа 2011

Я использую jQuery для создания эффекта аккордеона в меню, которое я создал.Меню имеет вкладки и использует вкладки пользовательского интерфейса jQuery, и в соответствии с их документацией я не могу использовать несколько эффектов для одного элемента.Таким образом, я использовал slideUp () и slideToggle () для создания эффекта, который работает, например, <a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Subjects</a>.

Однако в моем списке есть еще один неупорядоченный список, и он не отображается.Я не хочу иметь много ссылок для активации ползунка, так как это очень сложно поддерживать в моей CMS, которая выводит ссылки в виде списков.Пример моего кода: 

<div id="member-categories">
<ul id="categories">
    <li>
        <a onclick="$('ul#categories li ul ').slideUp();$(this).next().slideToggle()">Heading 1</a>
        <ul>
            <li><a href="#">Link 1</a>
                <ul>
                    <li><a href="#">Sub-Link 1</a></li>
                    <li><a href="#">Sub-Link 2</a></li>
                    <li><a href="#">Sub-Link 3</a></li>
                    <li><a href="#">Sub-Link 4</a></li>
                </ul>
            </li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li>
        <a onclick="$('ul#categories li ul').slideUp();$(this).next().slideToggle()">Heading 2</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
        </ul>
    </li>
</ul>
</div>

Если я нажму на заголовок 1, будут показаны только ссылки 1 и 2.При нажатии на заголовок 2 отображаются все ссылки.Почему <ul> ссылки 1 в заголовке 1 не отображается?

Спасибо

Ответы [ 2 ]

1 голос
/ 29 августа 2011

Это то, что вы ищете?

Демо

Когда вы выбираете «#Categories li ul», это скрывает весь внутренний список и элементы списка. Когда вы используете slideDown в первом неупорядоченном списке, он будет показывать (изменять свойство отображения) только своих прямых потомков (другими словами, внутренний список и элементы списка по-прежнему скрыты). Свойство отображения элементов внутреннего списка по-прежнему имеет значение «display: none». Вместо этого, если вы «покажете» каждое «ul», то будут показаны его прямые потомки (каждый li).

Редактировать: Альтернативно (как показывает демонстрация), вы можете просто скрыть первый набор неупорядоченных списков. 

$('#categories').children().children('ul').slideUp();

Таким образом, внутренние списки технически все еще показаны. Поэтому, когда вы показываете внешний список, отображаются все его дочерние элементы.

0 голосов
/ 28 августа 2011 
onclick="$('ul#categories li ul').slideUp();$(this).next('ul').slideToggle()">Subjects</a>

как насчет этого?

...