Question

我试图根据相邻（即前一个）.entry-text div的高度隐藏一个更多/更少的切换栏。如果.entry-text高于265px，我希望显示更多/更少的切换栏。如果.entry-text小于265px，我想隐藏切换栏。

这是js的相关部分：

$(".show-more").filter(function () {
    return ($(this).prev().height() < 265);
}).hide();

这是HTML结构：

<div class="panel entry-content" id="tab-included">
    <div class="entry-text">
        <!-- Content goes here -->
    </div>
    <div class="show-more"> <a href="#">Show more</a>
    </div>
</div>

我相信我实际上已经在JSFiddle（http://jsfiddle.net/ssnhy/1/）中使用了代码，但它似乎无法在我的网站上运行。以https://www.alangordon.com/sales/used/lenses/35mm/zooms/cooke-25-250mm-t3.9-zoom-lens为例：产品功能选项卡的内容明显短于265px，因此隐藏了更多/更少的切换栏。但是，“内容包含”选项卡的内容高于265px，但“更多/更少”切换栏也会隐藏。

感谢您阅读！

编辑：我想我已经解决了部分问题。页面加载时，任何未选中的选项卡返回的高度为0px，因此不会显示更多/更少的切换。我需要做的是让代码在选择选项卡时重新检查.entry文本的高度，以确定.entry文本是否足够高。

Answer 1

或在可见标签上将其作为一项功能运行

function sh() {
    $('.entry-text:visible').each(function() {//for each entry
        if ($(this).height()<265) {//if height less than 265
            $(this).siblings('.show-more').hide();//hide more
        }
    });
}
sh();//run on initial

$('.show-more a').on('click', function () {//for each more link
    $(this).text($(this).text()=='Show more'?'Show less':'Show more')//text
    .parent().prev('.entry-text').toggleClass('full-text');//class
    return false;
});

$('.tabs > li > a').on('click', function() { sh(); });//resize on new tab

做了一个小提琴：http://jsfiddle.net/filever10/Q7qH8/

Answer 2

这是最终为我工作的东西。我确信有重构的空间：

// Check height on the active tab
var $woo_tab_a_href = $('.woocommerce-tabs ul.tabs li.active a').attr('href');
$('div' + $woo_tab_a_href + " .show-more").filter(function () {
  return ($(this).prev(".entry-text").height() < 265);
}).hide();

// Check height on any tab that is clicked
$('.woocommerce-tabs ul.tabs li a').click(function(){
    var $tab = $(this);
    $('div' + $tab.attr('href') + " .show-more").filter(function () {
      return ($(this).prev(".entry-text").height() < 265);
    }).hide();
});

jQuery基于.prev（）高度隐藏类实例

2 个答案: