菜單展開時手風琴菜單不展開父容器

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 中看到#side-nav-container中有一個856px的內聯856px 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") 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);
}

在每次向上/向下滑動時：

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

就是這樣，沒有嘗試過，但它應該可以工作。