javascript - 展开菜单时， Accordion 菜单不会展开父容器

Question

当我在左侧导航中打开 Accordion 样式的菜单项时，菜单容器不会插入父容器的高度。我不确定为什么会这样。我想创建这样的效果，即当侧边栏高度增加时，父容器的高度也会增加。我怎样才能做到这一点？感谢您的帮助。

编辑:我可以发布特定于菜单的 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 中看到 #side-nav-container 中有 856px 的内联 STLye height。删除它，它应该可以工作。

编辑:高度在 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") 点击函数。您正在使用 slideUp/slideDown做 Accordion 效果。这些函数有第二个参数，当动画完成时执行。所以你需要做这样的事情:

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);
}

在每次上/下滑动时:

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();

仅此而已，没试过，但应该可以。