jQuery - 最初单击按钮两次以增加/减少 div 高度答案

【问题标题】：jQuery - Initially click button twice to increase/decrease div heightjQuery - 最初单击按钮两次以增加/减少 div 高度
【发布时间】：2016-07-05 09:51:40
【问题描述】：

我看过许多类似的帖子，但仍然无法在我的简单代码中指出问题所在。我确定这是一个简单的解决方案/这样做的原因..

这个想法是让 div 将高度增加到内容的 100%，或者将高度降低到原来的 150px，基于按钮单击的切换（变量 $status_on_button）。你在 jQuery 中看到的初始高度设置为 150px。

我必须先单击两次按钮才能触发第一个条件。 此后它按预期工作。如果它完全相关，则将 jQuery 代码输入到过去运行良好的 wordpress 插件中。我的代码如下：

HTML：

<div id="aboutus_container" style="overflow:hidden;">
  <!--some html elements/paragraphs here-->
</div>

<button class="btn btn-default" id="aboutus_readmore_button">Read more...</button>

jQuery:

jQuery(document).ready(function($) {

  // initialise toggle variable to zero and 'aboutus_container' div height
  $status_on_button = 0;
  $('#aboutus_container').css('height', '150px');

  //button click
  $('#aboutus_readmore_button').click(function(){
    if ($status_on_button==0) {
      $('#aboutus_container').animate({height:'150px'}, 500);
      $status_on_button = 1; //toggle button status
    } else {
      $('#aboutus_container').animate({height:'100%'}, 500);
      $status_on_button = 0; //toggle button status
    }
  });

});

这可能是一个“啊哈”的时刻，答案可能会盯着我看。谢谢。

【问题讨论】：

标签： jquery html button click toggle

【解决方案1】：

我不是 jQuery 专家（绝对不是！）但看起来您将变量设置为“0”，然后将高度设置为 150px，然后在函数中检查状态是否variable == 0 （它在第一次迭代中！）所以你在第一次点击时将它设置为 150px AGAIN。看起来只是一个逻辑问题！

再次重申，我不是 jQuery 专家，但我可能会做一些不同的事情 - 当您通过单击按钮触发函数时，首先获取 aboutus_container 的当前高度。例如（伪代码，因为我不了解 jQuery 语法）：

if(#aboutus_container(height) == 150px) {
     [make it 100%]
}
else {
     [make it 150px]
}

【讨论】：

老兄，你是 100% 正确的，当我完成我的帖子 LOL 时，我有这个尤里卡时刻。我回答了我自己的问题（见上文）。有时事情在你的脸上是对的，但你的想法让它变得复杂。谢谢！
哈 - 看到你在我发帖时回答了你的问题。我涉足 jQuery，所以我陷入了太多的逻辑缺陷，所以有时我很容易看到！

【解决方案2】：

啊，我才恍然大悟。我必须交换高度 100% 线和高度 150px 线。它必须首先完成 100% 的高度，或者它在第一次单击时第二次设置初始高度，这表明 div .. eureka 没有变化。输入这篇文章有帮助。我会把它留在这里给其他可能觉得有用的人。

这是更正后的 jQuery 代码：

jQuery(document).ready(function($) {

  // initialise toggle variable to zero and 'aboutus_container' div height
  $status_on_button = 0;
  $('#aboutus_container').css('height', '150px');

  //button click
  $('#aboutus_readmore_button').click(function(){
    if ($status_on_button==0) {
      $('#aboutus_container').animate({height:'100%'}, 500);
      $status_on_button = 1; //toggle button status
    } else {
      $('#aboutus_container').animate({height:'150px'}, 500);
      $status_on_button = 0; //toggle button status
    }
  });

});

为了澄清，这两行被交换了：

$('#aboutus_container').animate({height:'100%'}, 500);

$('#aboutus_container').animate({height:'150px'}, 500);

【讨论】：