Question

我搜索并尝试了不同的东西，但似乎无法获得所需的效果。我是jQuery的新手，因此需要你的输入。基本上，如果其中一个.handouts-sidebar div高于250px，我需要显示查看全部按钮。有多个具有.handouts-sidebar类的div。每个都有一个兄弟按钮.btn-popup，最初是隐藏的。

HTML结构

<div class="content-sidebar">
   <div class="handouts-sidebar">September's Handouts</div>
   <a class="btn-popup">View all</a>
</div>
<div class="content-sidebar">
   <div class="handouts-sidebar">October's Handouts</div>
   <a class="btn-popup">View all</a>
</div>
...


<script type="text/javascript">
    var div = jQuery(".handouts-sidebar").height();
    if (div > 245 ) {
      jQuery(".handouts-sidebar").next().show();
    }
</script>

帮助！谢谢！

Answer 1

试试这个：

＆＃13;

$('a').hide();
$('.handouts-sidebar').each(function(){
    var div = $(this).height();
    alert("The height of sidebar is " + div);
    if (div > 245) {
      $(this).siblings().show();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-sidebar">
   <div class="handouts-sidebar">September's HandoutsLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
   </div>
   <br>
   <a class="btn-popup">View all (i am displayed)</a>
</div>
<br>
<div class="content-sidebar">
   <div class="handouts-sidebar">October's Handouts</div>
   <br>
   <a class="btn-popup">View all</a>
</div>
...

＆＃13;

Answer 2

试试这段代码

   jQuery(document).ready(function() {
     jQuery( ".handouts-sidebar" ).load(function() {
        var div = jQuery(".handouts-sidebar").height();
        if (div > 245 ) {
        jQuery(this).next().show();
        }
       });
    });

可能是因为您没有包含就绪功能。如果它不起作用，请尝试在代码中包含ready函数

根据兄弟的身高显示div

2 个答案: