Fatal编程技术网
  • javascript/
  • Javascript 添加动态内容时更改边栏高度

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

javascript jquery

Javascript 添加动态内容时更改边栏高度,javascript,jquery,jquery-ui-accordion,Javascript,Jquery,Jquery Ui Accordion,我有一个“sticky sidebar nav”，它的位置绝对相对于#sidebardiv，因此它沿着页面左侧向下，并且始终可用。为了实现这一点，我必须在侧边栏中添加一个高度，因此我使用了一些代码来动态查找容器的高度。这是我使用的代码： <script type="text/javascript"> function matchColHeights(col1, col2) { var col1Height = $(col1).height();

我有一个“sticky sidebar nav”，它的位置绝对相对于
#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>
所以我的问题是，内容区域中有可扩展的内容（选项卡和手风琴），当内容扩展时，jQuery不会将侧边栏的高度更新为新高度（新高度可能比原始高度短或长）。我已尝试将该函数添加到我的
。单击（）
手风琴处理程序（尚未尝试使用选项卡），但下面是用于将我的手风琴下拉的代码：

<!--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>


$（文档）.ready（函数（）{
$（'div.content-accordion>div'）.hide（）；
$（'div.content-accordion>h4'）。单击（函数（）{
var$nextDiv=$（this.next（）；
变量$visiblesibbins=$nextDiv.sibbins（'div:visible'）；
如果（$visiblesibbins.length）{
$VisibleShibles.slideUp（'fast'，function（）{
$nextDiv.slideToggle（'fast'）；
$matchColHeights（“#侧栏”，“部分#主容器”）；
});
}否则{
$nextDiv.slideToggle（'fast'）；
$matchColHeights（“#侧栏”，“部分#主容器”）；
}
});
});
如您所见，我可以添加
$matchColHeights（'sidebar'，'section'main container'）函数”转换为“单击”函数，它仍然不会刷新到新高度。我尝试过其他一些可能性，但运气不好。
我相信你会写作


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



让我知道它是否有效。
只是为了让大家知道我找到了一个解决方案……花了很多时间，但代码如下


<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>


基本上，我在单击时必须将边栏高度设置回0，并创建一个函数来查找节#主容器的新高度，然后将其作为css高度应用到边栏。这很好地改变了侧边栏的高度，但是粘性侧边栏并没有重新调整到新的高度，所以我只是将工作粘性侧边栏的代码（以$（“aside”）开头的代码粘贴到函数中，它刷新得很好。感谢那些帮助


<!--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>   




$（文档）.ready（函数（）{
$（'div.content-accordian>div'）.hide（）；
$（'div.content-accordian>h4'）。单击（函数（）{
var$nextDiv=$（this.next（）；
变量$visiblesibbins=$nextDiv.sibbins（'div:visible'）；
如果（$visiblesibbins.length）{
$VisibleShibles.slideUp（'fast'，function（）{
$nextDiv.slideToggle（'fast'，function（）{
//开始更改边栏高度
$（“#边栏”）.css（{height:0}）；
newheight=$（“节#主容器”）.height（）；
$（“#边栏”）.css（{height:newheight}）；
$（“旁白”）.stickySidebar({
计时器：500
，宽松：“easeInOutQuint”
，约束：true
});
});
//端部更改边栏高度
});
}否则{
$nextDiv.slideToggle（'fast'，function（）{
//开始更改边栏高度
$（“#边栏”）.css（{height:0}）；
newheight=$（“节#主容器”）.height（）；
$（“#边栏”）.css（{height:newheight}）；
$（“旁白”）.stickySidebar({
计时器：500
，宽松：“easeInOutQuint”
，约束：true
});
});
//端部更改边栏高度
}
});
});

Hi manticore感谢您的帮助，但不幸的是，这不起作用。它不会触发新高度，也不会触发手风琴上的切换。我明白您的意思，尽管我认为它没有正确触发。也许我需要编写一条语句，在.click之前，然后在.click之后找到高度，然后修改cs因此，我实际上得到了修改，几乎可以使用'var curHeight=parseInt（$（“section#main container”）.height（））、newHeight=Math.ceil（curHeight/10）*10-5；$（“#sidebar”）.height（newHeight）；”但这并不是因为我不理解curheighth哦，而且你对manticore第一部分的理解是正确的！谢谢你的简化代码