如果另一个div高度溢出,则显示/隐藏按钮



我需要根据导航列表div高度溢出显示/隐藏div按钮,如果列表溢出,则显示按钮,否则隐藏。

JQuery

// didnt work for me! 
if($('#nav-list').prop('scrollHeight') < $('#nav-list').height()){
$('#updown-arrows').hide();
}else{
$('#updown-arrows').show();
}

HTML

<div id="nav-list">

<!-- wordpress nav menu -->
<?php
wp_nav_menu(
array(
'theme_location'    => 'primary',
'depth'             => 2,
'menu_class'        => 'list-unstyled components',
'menu_id'         => 'sidebarnav',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker()
)
);
?>
</div>
<!-- up/down arrows buttons -->
<div id="updown-arrows">
<a  id="up" href="#"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a>
<a  id="down" href="#"><span class="glyphicon glyphicon-menu-down bounce" aria-hidden="true"></span></a>
</div>

如果有人面临相同的问题

function checkOverflow() {
if ($('#nav-list').prop('scrollHeight') <= $('#nav-list').prop('clientHeight')){
$('#updown-arrows').hide();

} else {
$('#updown-arrows').show();

}
}
checkOverflow();
$(window).resize(function () {
checkOverflow()
})

最新更新