вертикальная навигация jQuery - slideUp slideDown - PullRequest
Новая
       20

вертикальная навигация jQuery - slideUp slideDown

0 голосов
/ 25 октября 2011

Я использую эту HTML-структуру: 

    <div id="products">
    <ul>
        <li class="selected"><a href="#">Item 1</a>
            <ul>
                <li><a href="#">Sub-Item 1 a</a></li>
                <li><a href="#">Sub-Item 1 b</a></li>
                <li><a href="#">Sub-Item 1 c</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a>
            <ul>
                <li><a href="#">Sub-Item 2 a</a></li>
                <li><a href="#">Sub-Item 2 b</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a>
            <ul>
                <li><a href="#">Sub-Item 3 a</a></li>
                <li><a href="#">Sub-Item 3 b</a></li>
                <li><a href="#">Sub-Item 3 c</a></li>
                <li><a href="#">Sub-Item 3 d</a></li>
            </ul>
        </li>
        <li><a href="#">Item 4</a>
            <ul>
                <li><a href="#">Sub-Item 4 a</a></li>
                <li><a href="#">Sub-Item 4 b</a></li>
                <li><a href="#">Sub-Item 4 c</a></li>
            </ul>
        </li>
    </ul>
</div>

и этот код jquery: 

    $(document).ready(function () {

    $("#products li").click(function() {
        if ($(this).attr('class') != 'selected') {
            $('#products li').removeClass('selected');
            $(this).addClass('selected');
            }
    });


    $("#products li").click(function() {
        $('#products li ul').slideUp();
        $('#products li.selected ul').slideDown();

    });

});

Проблема:

Я хочу, чтобы слайд только вверх и внизвлияние на элементы первого уровня (

), а не на подпункты

, другая проблема - если элемент списка уже class = "selected" и вы щелкаете по нему, он скользит вверх, а затем сновавниз .. (ничего не должно случиться, если оно уже есть)

Может кто-нибудь помочь с кодом jquery?

Ответы [ 3 ]

1 голос
/ 25 октября 2011

Попробуйте это:

Демо: http://jsfiddle.net/LEdgT/6/

$(document).ready(function () {
    $("#products > ul > li").click(function() {
        if ($(this).has('ul')) {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected')
                       .find('ul').slideUp();
            }
            else {
                $(this).addClass('selected')
                       .find('ul').slideDown();
            }
        }
    });
});
0 голосов
/ 25 октября 2011

Вы можете сделать это с помощью селектора :not или .not

    $('#products > li:not(.selected)').click(function() {
        $('#products li ul').slideUp();
        $('#products li.selected ul').slideDown();
    });
0 голосов
/ 25 октября 2011

Измените ваш селектор на $('#products > ul > li'), он будет выбирать только непосредственных потомков.

Или вы можете изменить весь код на что-то более читаемое и менее повторяющееся: 

var $topLevelItems = $("#products > ul > li");

$topLevelItems.click(function() {
    if (!$(this).hasClass('selected')) {
        $topLevelItems.removeClass('selected')
                      .find('ul')
                      .slideUp();

        $(this).addClass('selected')
               .find('ul')
               .slideDown();
    }
});
...