Question

我有一个'粘性侧边栏导航'，它位于绝对相对于#sidebar div的位置，所以它沿着左侧的页面向下，并且始终可用。为了完成这项工作，我不得不在侧边栏添加一个高度，所以我使用了一些代码来动态地找到容器的高度。这是我使用的代码：

<script type="text/javascript">
    function matchColHeights(col1, col2) {
        var col1Height = $(col1).height();
        var col2Height = $(col2).height();
        if (col1Height > col2Height) {
            $(col1).height(col2Height);
        } else {
            $(col1).height(col2Height);
        }
    }

    $(document).ready(function() {
        matchColHeights('#sidebar', 'section#main-container');
    })
</script>

目前，#sidebar div位于名为section#maincontainer的部分内。下面是一个非常简化的html版本。

<body>
    <header>Header content</header>
    <section id="main-container">
        <div id="sidebar">
            <ul>
                This is the floated ul
            <ul>
        </div>
        <div class="content">
            This is where the content of the page sits
        </div>
        <div class="content2">
            This is where the content of the page sits (because of the design there are often more than one divs floated right
            <div>Within the content divs are potential expanding divs (accordions and tabs that change size)</div>
        </div>
    </section>
    <footer>Footer content</footer>
</body>

所以我遇到的问题是内容区域中有可扩展的内容（制表符和手风琴），当内容扩展时，jQuery不会将侧边栏的高度更新为新的高度（这个新的高度可能是比原始高度更短或更长）。我已经尝试将该函数添加到我的手风琴.click()处理程序中（尚未尝试使用标签）但这里是用于放弃手风琴的代码：

<!--Content Accordion-->
<script type="text/javascript">
    $(document).ready(function() {
        $('div.content-accordion> div').hide();  
        $('div.content-accordion> h4').click(function() {
            var $nextDiv = $(this).next();
            var $visibleSiblings = $nextDiv.siblings('div:visible');

            if ($visibleSiblings.length ) {
                $visibleSiblings.slideUp('fast', function() {
                    $nextDiv.slideToggle('fast');
                    $matchColHeights('#sidebar', 'section#main-container');
                });
            } else {
                $nextDiv.slideToggle('fast');
                $matchColHeights('#sidebar', 'section#main-container');
            }
        });
    });
</script>

正如您所看到的，我可以将$matchColHeights('#sidebar', 'section#main-container');函数添加到click函数中，但它仍然不会刷新到新的高度。我尝试了其他几种可能性，没有运气。

Answer 1

只是为了让每个人都知道我找到了一个解决方案......有很多乱七八糟但是代码在下面。

我基本上在点击时必须将侧边栏高度设置为0，并创建一个函数来查找＃main-container部分的新高度，然后将其作为css高度应用于侧边栏。这改变了侧边栏的高度就好了，但是粘性侧边栏没有重新调整到新的高度，所以我只是粘贴了我的粘性侧边栏的代码（以$（“旁边”）开头的代码到函数中它刷新就好了。感谢那些帮助过的人。

<!--Content Accordian-->
<script type="text/javascript">
$(document).ready(function() {
  $('div.content-accordian> div').hide();  
  $('div.content-accordian> h4').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast', function() {
// START CHANGE SIDEBAR HEIGHT      
        $("#sidebar").css({ height: 0});
        newheight = $("section#main-container").height();
         $("#sidebar").css({ height: newheight});
         $("aside").stickySidebar({
            timer: 500
          , easing: "easeInOutQuint"
          , constrain: true
        });

      });
// END CHANGE SIDEBAR HEIGHT    
      });
    } else {
       $nextDiv.slideToggle('fast', function() {

// START CHANGE SIDEBAR HEIGHT      
        $("#sidebar").css({ height: 0});
        newheight = $("section#main-container").height();
         $("#sidebar").css({ height: newheight});
         $("aside").stickySidebar({
            timer: 500
          , easing: "easeInOutQuint"
          , constrain: true
        });

      });
// END CHANGE SIDEBAR HEIGHT
    }
  });
});
</script>

Answer 2

我相信你可以写

if (col1Height !== col2Height) {
    $(col1).height(col2Height);
}

而不是

if (col1Height > col2Height) {
    $(col1).height(col2Height);
} else {
    $(col1).height(col2Height);
}

但这不会解决你的问题。

您可能必须在回调中触发matchColHeights()函数，如下所示：

if ($visibleSiblings.length ) {
    $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast', function() {
            $matchColHeights('#sidebar', 'section#main-container');
        });
    });
} else {
    $nextDiv.slideToggle('fast', function() {
        $matchColHeights('#sidebar', 'section#main-container');
    });
}

让我知道它是否有效。

添加动态内容时更改侧边栏高度

2 个答案: