根据向下滑动的树形菜单项更改包含 div 的高度答案

【问题标题】：Change the height of the containing div according to sliding down tree menu items根据向下滑动的树形菜单项更改包含 div 的高度
【发布时间】：2014-08-02 01:34:06
【问题描述】：

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

<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 标记是不可见的。这个不可见的标签是绝对定位的。当我们点击教堂时，它会从 .但是容器 div #left_menu 的高度没有改变。我该如何解决这个问题？

【问题讨论】：

您是否使用任何类型的 javascript 来创建树形菜单？
是的。我添加了用于创建树形菜单的 jquery。
您好，您能否还包括树形菜单的相关 CSS 样式。谢谢！
我添加了所有的 css。谢谢！！！
嘿嘿嘿看来有人先解决了 :)

标签： html css

【解决方案1】：

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

小提琴：http://jsfiddle.net/fuMWw/3/

【讨论】：