Javascript Smooth Nested Аккордеонная Проблема - PullRequest
Новая
       1

Javascript Smooth Nested Аккордеонная Проблема

0 голосов
/ 06 сентября 2011

У меня есть вложенный скрипт аккордеона, использующий переключатель высоты jQuery. Проблема, с которой я сталкиваюсь, заключается в том, что если я пытаюсь развернуть элемент, который вложен в закрытый элемент, самый внешний контейнер перескочит при открытии. Например:

Заголовок 1 (расширенный)
Элемент 1 (расширенный)
Sub 1
Sub 2
Sub 3
Элемент 2
Элемент 3
Заголовок 2
Элемент 1
Sub 1
Sub 2
Sub 3
Элемент 2
Элемент 3

Что мне нужно сделать, так это уметь развернуть Заголовок 2> Элемент 1 (по существу, объединяя Элемент 1 и Заголовок 2 вместе), свернув Заголовок 1 и его дочерние элементы. Происходит следующее: когда заголовок 2 расширяется, он учитывает только высоту элементов 1,2 и 3 и не учитывает высоту всех дочерних элементов, принадлежащих элементу. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.element').click(function(){ adjust_slider(this); });
    });

    function adjust_slider(elem) {
        var holder    = ($(elem).next('div').attr("rel") == $(elem).attr("rel") && $(elem).next('div').children('.holder').length == 1) ? $(elem).next('div') : '';
        var items     = [[holder,$(elem)]];
        var parent    = $(elem).parent().parent();
        var reference = $(parent).prev('div');

        while(($(parent).attr("rel") == $(reference).attr("rel")) && $(parent).length && $(reference).length) {
            items.unshift( [parent, reference] );   

            parent    = $(reference).parent().parent();
            reference = $(parent).prev('div');
        }


        // UPDATE CLASSES
        $('.main *').removeClass("active");
        $.each(items, function(index, value) { 
               change_class(value);
        });

        // ANIMATE SLIDES
        toggle_height();
    }

    function change_class(elem) {
        if( !$(elem[1]).hasClass("active") ) {
            $(elem[1]).addClass('active');
            $(elem[0]).addClass('active');
        }
    }

    function toggle_height() {
        $.each($(".main .holder").parent(), function() {
               if( ($(this).hasClass("active") && !$(this).is(':visible')) || (!$(this).hasClass("active") && $(this).is(':visible')) ) {
                   $(this).animate({'height': 'toggle'}, 300);
               }
        });
    }
</script>

<style type="text/css">
    .element { cursor: pointer; height: 20px; }
    .sub_main .element { padding-left: 10px; font-weight: normal; }
    .section  .element { padding-left: 20px; font-weight: normal; }
    .active, .sub_main .active, .section .active  { font-weight: bold; }
    .sub_main, .section { display: none; }
</style>
</head>

<body>
<div class="main">
    <div class="element" rel="headone">Header One</div>
    <div class="sub_main" rel="headone">
        <div class="holder">
            <div class="element" rel="subone">Sub One</div>
            <div class="section" rel="subone">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>

            <div class="element" rel="subtwo">Sub Two</div>
            <div class="section" rel="subtwo">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>


            <div class="element" rel="subthree">Sub Three</div>
            <div class="section" rel="subthree">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>
        </div>
    </div>

    <div class="element" rel="headtwo">Header Two</div>
    <div class="sub_main" rel="headtwo">
        <div class="holder">
            <div class="element" rel="subone">Sub One</div>
            <div class="section" rel="subone">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>

            <div class="element" rel="subtwo">Sub Two</div>
            <div class="section" rel="subtwo">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element" id="h2_s2_e2">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>


            <div class="element" rel="subthree">Sub Three</div>
            <div class="section" rel="subthree">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>
        </div>
    </div>


    <div class="element" rel="headthree">Header Three</div>
    <div class="sub_main" rel="headthree">
        <div class="holder">
            <div class="element" rel="subone">Sub One</div>
            <div class="section" rel="subone">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>

            <div class="element" rel="subtwo">Sub Two</div>
            <div class="section" rel="subtwo">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>


            <div class="element" rel="subthree">Sub Three</div>
            <div class="section" rel="subthree">
                <div class="holder">
                    <div class="element">One</div>
                    <div class="element">Two</div>
                    <div class="element">Three</div>
                </div>
            </div>
        </div>
    </div>
</div>
<br /><br />
<a href="#" onclick="adjust_slider($('#h2_s2_e2'))">Expand Header Two > Sub Two > Element Two</a>

</body>
</html>
...