仅当某个div的高度> 1时才显示div。比设定高度？

时间：2015-08-03 19:35:02

标签： javascript jquery html css twitter-bootstrap

我创建了一个具有可滚动内容区域的标签模块。我做了一个快速闪烁的箭头样式，让用户知道这个盒子是可滚动的。我想这样做只有当我的内容（可滚动文本框区域）高于某个高度时才能看到这个div。

例如，我的可滚动区域始终设置为height:450px。所以我需要一种方法来弄清楚如何获得内容区域的高度，然后如果小于450px高度，则不显示我的div more-info。

这是一个带有工作演示的jsfiddle。

HTML结构 

<div class="tabs-left app-about-page">
      <div class="more-info"></div>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></a></li>
          <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star">Donor Cultivation</span></a></li>
          <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones">Donor Retention</span></a></li>
          <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time">Donor Blogging</span></a></li>
          <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar">Donor Engagement</span></a></li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane active" id="a">
          </div>


          <div class="tab-pane" id="b">
          </div>


          <div class="tab-pane" id="c">
            </div>

          <div class="tab-pane" id="d">
          </div>

          <div class="tab-pane" id="e">
          </div>

        </div><!-- /tab-content -->
      </div><!-- /tabbable -->

从一些搜索和拼凑，我发现了这样的东西，所以假设这是起点。

$(document).ready(function () {
    if ($(".tab-pane").height() > 450 {
        jQuery(".more-info").fadeIn(200);
    } else {
        jQuery(".more-info").hide(100);
    });

5 个答案:

答案 0 :(得分：3)

只需使用shown.bs.tab事件，即可显示和隐藏您的箭头div。

Togglable tabs Events

  

<强> shown.bs.tab

     

显示标签后，此标记会在标签显示中触发。使用event.target和event.relatedTarget分别定位活动选项卡和上一个活动选项卡（如果可用）。

＆＃13;
＆＃13; 
$('.more-info').css('display', 'none');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var activeContentElem = $($(e.target).attr('href'));
  if (activeContentElem[0].scrollHeight > activeContentElem.height()) {
    $('.more-info').css('display', 'block');
  } else {
    $('.more-info').css('display', 'none'); 
  }

})
＆＃13; 
.nav-tabs {
  float: left;
  border-bottom: 0;
}
.nav-tabs li {
  float: none;
  margin: 0;
  width: 106px;
  height: 106.5px;
  left: -30px;
  top: -20px;
  position: relative;
  display: block;
  background-color: #F2F2F0;
  margin-top: 0;
  border-bottom: #FFF 2px solid;
  text-align: center;
  -webkit-transition: all 0.3s linear 0s;
  -moz-transition: all 0.3s linear 0s;
  -ms-transition: all 0.3s linear 0s;
  -o-transition: all 0.3s linear 0s;
  transition: all 0.3s linear 0s;
}

.nav-tabs li:last-child{
  border:none;
}

.nav-tabs li a{
  display: block;
  height: 75px;
  position: relative;
  padding-top: 31px;
  font-size: 14px;
  color:rgb(51, 51, 51);
  text-decoration: none;
}
.nav-tabs li:hover {
  background-color: #DBDBDA;
  cursor:pointer;

}

.nav-tabs > li.active, .nav-tabs > li.active a,  .nav-tabs > li a:active, .nav-tabs > li.active > li:focus, .nav-tabs >li a:focus {
  background:rgba(51, 181, 229, 0.45);
  color:#FFF;
  text-decoration: none;
}

.tab-content {
  margin-left: 45px;
}
.tab-content .tab-pane {
  display: none;
  background-color: #fff;
  padding: 0;
  overflow-y: auto;
}

.tab-pane p{
  margin: 0  0 16px 0;
}

.tab-pane p:first-child{
  margin:5px 0 16px;
}

.tab-pane h1{
  padding-bottom: 5px;
  border-bottom: 1px solid #DBDBDA;
  margin-bottom: 16px;
}

.tab-pane img{
  max-width: 70%;
}


.tab-content .active {
  display: block;
  overflow: scroll;
  height: 450px !important;
  padding: 0px 15px 0 0px;
}

.list-group {
  width: 100%;
}
.list-group .list-group-item {
  height: 50px;
}
.list-group .list-group-item h4, .list-group .list-group-item span {
  line-height: 11px;
}




@-webkit-keyframes circleBounce {
  0% {-webkit-transform: scale(0.9); opacity: 0;}
  20% {opacity: 0.5;}
  50% {opacity: 1;}
  80% {opacity: 0.5;}
  100% {-webkit-transform: scale(1.1); opacity:0;}
}

.more-info {
  position: absolute;
  bottom: 30px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  border: 2px solid rgb(51, 181, 229);
  border-top: none;
  border-left: none;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
}

.more-info:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 17px);
  width: 35px;
  height: 35px;
  border: 1px solid rgba(255,255,255,.8);
  border: 1px solid rgb(51, 181, 229);
  border-radius: 50%;
  -webkit-animation: circleBounce 2.5s linear infinite;
}

.more-info:hover:after {
  background-color: rgba(51, 181, 229, .15);
  cursor:inherit;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="tabs-left app-about-page">
  <div class="more-info"></div>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#a" data-toggle="tab"><span class="glyphicon glyphicon-heart">Donor Acquisition</span></a></li>
    <li><a href="#b" data-toggle="tab"><span class="glyphicon glyphicon-star">Donor Cultivation</span></a></li>
    <li><a href="#c" data-toggle="tab"><span class="glyphicon glyphicon-headphones">Donor Retention</span></a></li>
    <li><a href="#d" data-toggle="tab"><span class="glyphicon glyphicon-time">Donor Blogging</span></a></li>
    <li><a href="#e" data-toggle="tab"><span class="glyphicon glyphicon-calendar">Donor Engagement</span></a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="a">
      <h1>Donor Acquisition</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>


    <div class="tab-pane" id="b">
      <h1>Donor Cultivation</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>


    <div class="tab-pane" id="c">
      <h1>Donor Retention</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>

    <div class="tab-pane" id="d">
      <h1>Nonprofit Blogging</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>

    <div class="tab-pane" id="e">
      <h1>Nonprofit Engagement</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet.</p>
    </div>

  </div><!-- /tab-content -->
</div><!-- /tabbable -->
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

首先，开始隐藏在CSS中的.more-info课程。
然后，您可以在每次可见标签更改时检查标签内容的高度，如果大于450px，则可以更换更多信息按钮的可见性。

这是jQuery片段：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var div = $($(e.target).attr('href'));

    $('.more-info').hide();
    if (div.get(0).scrollHeight > 450)
        $('.more-info').show();
});

答案 2 :(得分：0)

我在这里不太确定，但我再看了一遍并想出了这个。

var clientHeight = document.getElementById('myDiv').clientHeight;

和这个的一些组合.. 

[DIV].style.visibility='visible'

[DIV].style.visibility='hidden'

然后使用if语句？

有点新的编码，但也许这是在正确的轨道上。

答案 3 :(得分：0)

您可以将事件绑定到菜单锚点，以检查活动div的高度与该div的滚动高度，并显示或隐藏闪烁的箭头。

使用JQuery，这样就可以在你的bootstrap完成后触发：

 $(document).ready(function(){

$('a[data-toggle="tab"]').on('shown.bs.tab', function (){
    ToggleMoreInfoArrow();
     //Call the toggle every time the content changes.
    });

ToggleMoreInfoArrow(); //Call it the first time the page loads.
});

function ToggleMoreInfoArrow()
{
        if( $('div.active').prop('scrollHeight') < $('div.active').height())
        {
            $('.more-info').hide();
        }
        else
        {
            $('.more-info').show();
        }
}

编辑：我不确定您的“活动”类是如何设置的，但是您希望在发生这种情况后运行高度检查代码。这可能是在页面加载或任何地方，if语句是重要的一点。

编辑：看到这个工作小提琴：http://jsfiddle.net/9hkpzagz/7/

答案 4 :(得分：0)

Hello multinum编程用户，我不喜欢示例中的脚本，我更改了CSS，移动了更多＆＃34;更多＆＃34;按钮到右下角，但我做了以下事情： 1.你应该始终将.tab-pane设置为开始时的设置高度而不是滚动，所以我将CSS更改为＆＃34; overflow：hidden＆＃34;

  1. 我写了一个函数来检查标签内容的高度，并激活或停用＆＃34;更多＆＃34;
  2. 如果＆＃34;更多＆＃34;点击按钮，标签内容CSS＆溢出-y＆＃39;选项更改为＆＃39; auto＆＃39; - 这会添加垂直滚动条。

    3. http://jsfiddle.net/9hkpzagz/8/

    这是我的js代码：

    function checkHeightAndSetMore(clickedMore){
    var activeTabH=$('.tab-content .active').height();
    if(activeTabH >450){
      $('div.more-info').fadeIn();
    }
    else{
    $('div.more-info').fadeOut();
    }
    if(clickedMore == 1){
        $('.tab-content .active').css('overflow-y', 'auto');
        $('div.more-info').fadeOut();
    }

}
$(document).ready(function(){
checkHeightAndSetMore(0);
    $('.more-info').click(function(){        
       checkHeightAndSetMore(1);
    });
});
相关问题
最新问题