html - 根据向下滑动树菜单项更改包含 div 的高度

Question

我在网站的左侧有一个树形菜单，如下所示。

<div id="left_menu">
    <ul id="treeMenu">
        <li><a href="#">Message of Rev. Surangika Fernando</a></li>
        <li><a href="#">125th Aniversary</a></li>
        <li><a href="#">200th Aniversary</a></li>
        <li class="contentContainer"><a href="#">Churchs</a>
            <ul>
                <li><a href="#">Dalupotha</a></li>
                <li><a href="#">Negombo</a></li>
                <li><a href="#">Andiambalama</a></li>
                <li><a href="#">Pitipona</a></li>
                <li><a href="#">Amandoluwa</a></li>
            </ul>
        </li>
    </ul>
</div>

使用 jquery。

$(document).ready(function() {

        //Class 'contentContainer' refers to 'li' that has child with it.
        //By default the child ul of 'contentContainer' will be set to 'display:none'           
        $("#treeMenu li").toggle(

            function() { // START FIRST CLICK FUNCTION
                $(this).children('ul').slideDown()
                if ($(this).hasClass('contentContainer')) {
                    $(this).removeClass('contentContainer').addClass('contentViewing');
                }
            }, // END FIRST CLICK FUNCTION

            function() { // START SECOND CLICK FUNCTION
                $(this).children('ul').slideUp()

                if ($(this).hasClass('contentViewing')) {
                    $(this).removeClass('contentViewing').addClass('contentContainer');
                }
            } // END SECOND CLICK FUNCTIOn
        ); // END TOGGLE FUNCTION

    }); // END DOCUMENT READY

这是CSS。

#left_menu
{

margin-top: 5px;
margin-right: 5px;
padding-bottom: 5px;
color: #ffffff;
float: left;
position: relative;
border: 1px solid brown;
border-radius: 15px;
}
#left_menu ul
{
   padding: 0;
   float: left;
}
#left_menu li
{
    list-style: none;
    display: block;
    border-bottom: 1px dashed;
    margin: 5px;
    padding: 0;
}
#left_menu ul li a
{
    width: 305px;
    padding: 10px 10px 10px 15px;
    display: inline-block;
 }
#left_menu ul li ul
{
    display:none;
    position: absolute;
    margin: 0;
    padding: 0;
}

#left_menu li ul li
{
    clear:both;
    border-bottom: 1px dashed;
    padding: 0;
    margin: 0;
}
#left_menu li ul li a
{
    width: 280px;
    padding-left: 40px;
}
#left_menu li a:hover
{
    background:url(../images/nav_bg.png);
}

在这段代码中，Churchs li 标签内的 ul 标签是不可见的。这个不可见的标签是绝对定位的。当我们点击 Churchs 时，它会向下滑动。但是容器 div #left_menu 的高度没有改变。我该如何解决这个问题？

Answer 1

您可以尝试将 #left_menu ul li ul 设置为相对定位，并在 #left_menu 上添加 340px 的最大宽度

fiddle :http://jsfiddle.net/fuMWw/3/