【问题标题】:show/hide buttons if another div height is overflow如果另一个 div 高度溢出,则显示/隐藏按钮
【发布时间】:2021-03-25 21:01:11
【问题描述】:

我需要根据nav-list 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>

【问题讨论】:

  • 我会改用 CSS 媒体查询。这是example

标签: javascript html jquery css


【解决方案1】:

如果有人遇到同样的问题

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-02-26
    • 2015-06-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多