Question

我有一个使用jQuery高度切换的嵌套手风琴脚本。我遇到的问题是，如果我尝试扩展嵌套在封闭的元素中的元素，则最外面的容器会在打开时跳转。例如：

标题1（扩展）
第1项（扩大）
Sub 1
Sub 2
子3
第2项第3项标题2
第1项 Sub 1
Sub 2
子3
第2项第3项

我需要做的是能够扩展标题2＆gt;项目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>

Javascript平滑嵌套手风琴问题

0 个答案: