Question

我有一些jQuery限制某个div的高度，并在下面添加一个按钮来展开/显示隐藏部分。

我只想隐藏div＆amp;如果div高度大于我设置的最小高度closeHeight，则显示该按钮。

这是我的代码：

jQuery(document).ready(function() {
    var closeHeight = '20'; /* Default "closed" height */
    var moreText    = 'Read More'; /* Default "Read More" text */
    var lessText    = 'Read Less'; /* Default "Read Less" text */
    var duration    = '1000'; /* Animation duration */
    var easing      = 'linear'; /* Animation easing option */

    // Limit height of bio wrapping div
    jQuery('.single-artist-content .artist-bio-wrap').each(function() {

        var current = jQuery(this).children('.read-more-wrap');

        if (current.height() > closeHeight) {

            // Set data attribute to record original height
            current.data('fullHeight', current.height()).css('height', closeHeight + 'em');

            // Insert "Read More" link
            current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>');

        } else {
            // Do nothing
        }

    });

// Link functinoality
    var openSlider = function() {
        link = jQuery(this);
        var openHeight = link.prev('.read-more-wrap').data('fullHeight') + 'px';
        link.prev('.read-more-wrap').animate({'height': openHeight}, {duration: duration }, easing);
        link.text(lessText).addClass('open').removeClass('closed');
        link.unbind('click', openSlider);
        link.bind('click', closeSlider);
    }

    var closeSlider = function() {
        link = jQuery(this);
        link.prev('.read-more-wrap').animate({'height': closeHeight + 'em'}, {duration: duration }, easing);
        link.text(moreText).addClass('closed').removeClass('open');
        link.unbind('click');
        link.bind('click', openSlider);
    }

    // Attach link click functionality
    jQuery('.more-link').bind('click', openSlider);

});

在我输入实际的条件if (current.height() > closeHeight)之前它正在工作所以我知道这一定是问题所在，但我无法弄清楚原因。

任何人都可以帮助发现我做错了吗？谢谢！

编辑：使用正确答案编辑上面的代码。

Answer 1

函数height()返回一个没有单位的像素数。但是，您将它与20em进行比较，而height()永远不会匹配。此外，您将整数（从20em返回）与字符串（height()）进行比较。

你可以找到20em像素高度的一种方法是创建一个假对象，将其设置为20em，然后抓取该元素的实际jQuery(document).ready(function() { var closeHeight = '20em'; /* Default "closed" height */ var moreText = 'Read More'; /* Default "Read More" text */ var lessText = 'Read Less'; /* Default "Read Less" text */ var duration = '1000'; /* Animation duration */ var easing = 'linear'; /* Animation easing option */ //Here's where you can fix your closeHeight value: $fakeEl = jQuery("<div></div>").height(closeHeight); //set the element to closeHeight 20em closeHeight = $fakeEl.height(); //set closeHeight to an integer in pixels $fakeEl.remove(); //probably unnecessary because you never appended it to the DOM. // Limit height of bio wrapping div jQuery('.single-artist-content .artist-bio-wrap').each(function() { var current = jQuery(this).children('.read-more-wrap'); if (current.height() > closeHeight) { // Set data attribute to record original height current.data('fullHeight', current.height()).css('height', closeHeight); // Insert "Read More" link current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>'); } else { // Do nothing } }); // Link functinoality var openSlider = function() { link = jQuery(this); var openHeight = link.prev('.read-more-wrap').data('fullHeight') + 'px'; link.prev('.read-more-wrap').animate({'height': openHeight}, {duration: duration }, easing); link.text(lessText).addClass('open').removeClass('closed'); link.unbind('click', openSlider); link.bind('click', closeSlider); } var closeSlider = function() { link = jQuery(this); link.prev('.read-more-wrap').animate({'height': closeHeight}, {duration: duration }, easing); link.text(moreText).addClass('closed').removeClass('open'); link.unbind('click'); link.bind('click', openSlider); } // Attach link click functionality jQuery('.more-link').bind('click', openSlider); });。

      <div class="dropdown">
        <div>
          <div class="col-lg-6">
            <div class="col-lg-3">
              Report
            </div>
            <div class="col-lg-3">
              <select  style="width:150px" id="urlListCombobox">
                <option value="">--Select--</option>
                <option ng-repeat="(key, value) in urlList" value="{{key}}">{{value}}</option>
              </select>
            </div>
          </div>
          <div style="float: right;margin-right: 30px;">
            <button  type="button"  style="min-width: 100px;"  class="btn btn-primary pull-right" ng-click="redirectUrl()">Get Report</button>
          </div>
        </div>
      </div>

Answer 2

请注意.height（）获取计算的高度，而不是'20em'的字符串。因此，您的比较甚至可能会失败，并且可能会返回false。

if条件将失败。

我建议使用bootstrap或其他一些响应式框架，但是如果你仍然想坚持使用这种方法，请比较类似的属性，比如设置隐藏div的高度，然后比较2 divs intead的高度。

步骤1.创建一个隐藏的div，将其高度设置为'20em'

第二步。比较第一个div的高度和隐藏的div

如果div高度大于，则如何跳过函数

2 个答案: