Question

我想得到一个被切换的类的高度。单击按钮时，将添加类.category-menu-visible。如果班级存在，那么我想得到它的高度。但是当我提醒menuHeight时，它是0。

实际代码：

的jQuery

jQuery('.topics-btn').click(function(){
  jQuery('.category-menu-wrap').toggleClass('category-menu-visible');

  if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
    var menuHeight = jQuery('.category-menu-visible').height();
    alert(menuHeight);
    jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
  } else {
    jQuery('.sidebar .content-wrap').css('margin-top', 0);
  }

});

CSS：

.category-menu-wrap {
  width:100%;
  height:0px;
  background-color:#F7D5B6;
  overflow: hidden;
  transition: height .5s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
  height: 70px;
  transition: height .3s cubic-bezier(.27,1.76,.95,1.1);
}

为什么无法检索高度？

Answer 1

来自official docs

当隐藏元素或其父元素时，不保证.height（）报告的值是准确的。要获得准确的值，请确保在使用.height（）
之前元素可见

这里的问题恰恰是：您的.category-menu-visible不可见。当JQuery查找它时。这是由于在切换类上设置了持续时间的过渡属性。

更新（根据JSFiddle）

似乎在切换课程时，除非指定了测量单位，否则在切换课程中无法识别高度。

即使没有过渡属性，也会发生这种情况。

Not working example - height: 70;

Working Example - height: 70px;

Answer 2

你需要等到过渡结束。的更新有一个有用的事件transitionend可以做到：

＆＃13;
＆＃13;
jQuery('.topics-btn').click(function(){ var $menu = jQuery('.category-menu-wrap'); $menu.toggleClass('category-menu-visible'); $menu.on("transitionend", function(){ if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){ var menuHeight = jQuery('.category-menu-visible').height(); alert(menuHeight); jQuery('.sidebar .content-wrap').css('margin-top', menuHeight); } else { jQuery('.sidebar .content-wrap').css('margin-top', 0); } }); });
＆＃13;
.category-menu-wrap { height: 0; } .category-menu-visible { height: 70px; transition: height .3s cubic-bezier(.27,1.76,.95,1.1); }
＆＃13;
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> <button class='topics-btn'>Click</button> <div class='category-menu-wrap'></div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

您遇到的问题是 CSS过渡。单击时计算高度，但此时它为0.转换后，它将具有70px值。你需要在过渡结束后获得高度。

在此示例中，转换持续时间设置为0s。

＆＃13;

jQuery('.topics-btn').click(function(){
  jQuery('.category-menu-wrap').toggleClass('category-menu-visible');

  if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
    var menuHeight = jQuery('.category-menu-visible').height();
    alert(menuHeight);
    jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
  } else {
    jQuery('.sidebar .content-wrap').css('margin-top', 0);
  }

});

＆＃13;

.category-menu-wrap {
  width:100%;
  height:0px;
  background-color:#F7D5B6;
  overflow: hidden;
  transition: height 0s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
  height: 70px;
  transition: height 0s cubic-bezier(.27,1.76,.95,1.1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="topics-btn">.topics-btn</button>
<div class="category-menu-wrap"></div>

＆＃13;

在另一个例子中，我们依靠transitionend事件来获取高度值：

＆＃13;

jQuery('.topics-btn').click(function(){
  jQuery('.category-menu-wrap').toggleClass('category-menu-visible');
  
});

jQuery('.category-menu-wrap').on('transitionend',function(){
  if (jQuery('.category-menu-wrap').hasClass('category-menu-visible')){
    var menuHeight = jQuery('.category-menu-visible').height();
    alert(menuHeight);
    jQuery('.sidebar .content-wrap').css('margin-top', menuHeight);
  } else {
    jQuery('.sidebar .content-wrap').css('margin-top', 0);
  }

});

＆＃13;

.category-menu-wrap {
  width:100%;
  height:0px;
  background-color:#F7D5B6;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(.27,1.76,.95,1.19);
}
.category-menu-visible {
  height: 70px;
  transition: height 0.5s cubic-bezier(.27,1.76,.95,1.1);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="topics-btn">.topics-btn</button>
<div class="category-menu-wrap"></div>

＆＃13;

无法从toggleClass jQuery

3 个答案: