jQuery

Question

我看过很多类似的帖子，但仍然无法在我的简单代码中找出问题所在。我确定这是一个简单的 solution/reason 它正在这样做..

这个想法是 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
    }
  });

});

这可能是 "aha" 给出答案的时刻，而且可能会直视我。谢谢。

Answer 1

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

这是更正后的 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);

Answer 2

我不是 jQuery 专家（不是远射！）但看起来你将变量设置为“0”，然后将高度设置为 150px，然后在函数中你'正在检查状态变量是否 == 0（这是第一次迭代！），因此您在第一次点击时再次将其设置为 150px。看起来只是逻辑问题！

同样，我不是 jQuery 专家，但我可能会做一些不同的事情 - 当您通过单击按钮触发功能时，首先获取 aboutus_container 的当前高度。例如（伪代码，因为我根本不知道 jQuery 语法）：

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

jQuery - 最初点击按钮两次到 increase/decrease div 高度

jQuery - Initially click button twice to increase/decrease div height

html

click

button

toggle