Question

当我在左侧导航中打开手风琴样式的菜单项时，菜单容器不会推动父容器的高度。我不确定为什么会这样。我想创建一个效果，当侧栏高度增加时，父容器的增加也是如此。我怎么能做到这一点？谢谢你的帮助。

编辑：我可以发布特定于菜单的CSS，但它相当长。如果需要，请告诉我。

HTML：

        <div class="content-container">
            <div id="side-nav-container">
                <div id='cssmenu'>
                    <ul>
                       <li><a href='/index'><span>Home</span></a></li>
                       <li><a href='#'><span>Landscaping</span></a>
                          <ul>
                             <li><a href='#'><span>Planters</span></a></li>
                             <li><a href='#'><span>Walls</span></a></li>
                             <li><a href='#'><span>Stone Work</span></a></li>
                             <li><a href='#'><span>Walkways</span></a></li>
                             <li><a href='#'><span>Stairways</span></a></li>
                             <li><a href='#'><span>Steps</span></a></li>
                             <li><a href='#'><span>Water Falls</span></a></li>
                             <li><a href='#'><span>Ponds</span></a></li>
                             <li><a href='#'><span>Creek Beds</span></a></li>
                             <li><a href='#'><span>Pondless Water Features</span></a></li>
                             <li><a href='#'><span>Enhancement Lighting</span></a></li>
                             <li><a href='#'><span>Patios</span></a></li>
                             <li><a href='#'><span>Fireplaces</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Lawn Care</span></a>
                          <ul>
                             <li><a href='#'><span>Mowing</span></a></li>
                             <li><a href='#'><span>Fertilization &amp; Weeding</span></a></li>
                             <li><a href='#'><span>Fall and Spring Cleanup</span></a></li>
                             <li><a href='#'><span>Shrub Trimming</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Irrigation</span></a>
                          <ul>
                             <li><a href='#'><span>Installation</span></a></li>
                             <li><a href='#'><span>Design</span></a></li>
                             <li><a href='#'><span>Maintenance</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Porous Pave</span></a>
                          <ul>
                             <li><a href='#'><span>Walkways</span></a></li>
                             <li><a href='#'><span>Patios</span></a></li>
                             <li><a href='#'><span>Pools</span></a></li>
                             <li><a href='#'><span>Playgrounds</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>Demo Dumpsters</span></a></li>
                       <li><a href='#'><span>Outdoor Kitchens</span></a>
                          <ul>
                             <li><a href='#'><span>Italian Pizza Ovens</span></a></li>
                             <li><a href='#'><span>Kitchens</span></a></li>
                             <li><a href='#'><span>BBQs</span></a></li>
                          </ul> 
                       </li>
                       <li><a href='#'><span>Products &amp; Rentals</span></a>
                          <ul>
                             <li><a href='#'><span>Pond Supplies</span></a></li>
                             <li><a href='#'><span>Split fire wood splitters</span></a></li>
                             <li><a href='#'><span>Altoz Precision Mowers</span></a></li>
                          </ul>
                       </li>
                       <li><a href='#'><span>About</span></a></li>
                       <li><a href='#'><span>Contact</span></a></li>
                    </ul>
                </div>
                <div id="contact-info">
                    <p><strong>Phone</strong><br />
                        (218) 759-2376
                    </p>
                    <br />
                    <p><strong>Email</strong><br />
                        <a href="mailto:info@tkoutdoors.com">info@tkoutdoors.com</a>
                    </p>
                </div>
                <img src="/_images/layout/Request-Quote-Btn.jpg" alt="request a quote" />
            </div>
            <div id="content">
                {tag_pagecontent}
            </div>
        </div>

萨斯：

div.content-container{
  width: 100%;
  height: auto;
  margin-top: 1em;
  overflow: hidden;
  background-color: #FAF8F0;
  padding: 0.5em;
  position: relative;
  #side-nav-container{
    width: 215px;
    padding: 1em 0.25em;
    float: left;
    background-color: #F2F0CE;
    overflow: hidden;
    position: relative;
    #contact-info{
      padding: 1em 0;
      width: 85%;
      margin: 0 auto;
    }
  }
}

直播网站：http://www.tkoutdoors.com

Answer 1

我在Firebug中看到height中有856px的内嵌#side-nav-container。删除它，它应该工作。

编辑：scripts.js的最后一部分正在设置身高。

EDIT2 ：这是您的实际scripts.js：

jQuery(document).ready(function () {
    $("#nav_1487666 li a").mouseover(function () {
        $(this).parent().prev().find("a").css("border-bottom", "none")
    }), $("#nav_1487666 li a").mouseout(function () {
        $(this).parent().prev().find("a").css("border-bottom", "1px solid #790C0E")
    }), $("#cssmenu > ul > li > a").click(function () {
        var a = $(this).next();
        return $("#cssmenu li").removeClass("active"), $(this).closest("li").addClass("active"), a.is("ul") && a.is(":visible") && ($(this).closest("li").removeClass("active"), a.slideUp("normal")), a.is("ul") && !a.is(":visible") && ($("#cssmenu ul ul:visible").slideUp("normal"), a.slideDown("normal")), 0 == $(this).closest("li").find("ul").children().length ? !0 : !1
    }), $(function () {
        var a = $("#content").height(),
            b = $("#side-nav-container").height();
        a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
    })
});

看看$("#cssmenu > ul > li > a") click function。您正在使用slideUp / slideDown来执行手风琴效果。这些函数具有第二个参数，该参数在动画完成时执行。所以你需要做这样的事情：

function menuHeight() {
    $('#side-nav-container').height('auto');
    $('#content').height('auto');
    var a = $("#content").height(),
    b = $("#side-nav-container").height();
    a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b);
}

在每个slideUp / Down上：

a.slideUp("normal", function() {
    menuHeight();
})

删除它：

$(function () {
    var a = $("#content").height(),
    b = $("#side-nav-container").height();
    a > b ? $("#side-nav-container").css("height", a) : $("#content").css("height", b)
 })

并将其替换为：

menuHeight();

全部，没有尝试过，但它应该有用。

菜单展开时，折叠菜单不会展开父容器

1 个答案: