Question

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

根据按钮点击切换（变量$status_on_button），想法是div高度增加100％的内容，或高度减少回原来的150px。您可以在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
    }
  });

});

这可能是一个＆＃34; aha＆＃34;答案的那一刻，可能正盯着我的脸。谢谢。

Answer 1

啊，它突然袭来我。我必须高度100％线和150px高度线。它必须首先执行100％高度，或者在第一次单击时再次设置初始高度，这表示div没有变化。尤里卡。打这篇文章有帮助。我会把它留给其他可能会觉得有用的人。

以下是更正后的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 AGAIN。看起来只是一个逻辑问题！

同样，我不是jQuery专家，但我可能会有所不同 - 首先获得当用按钮点击触发功能时aboutus_container的当前高度。例如（伪代码，因为我不知道jQuery语法）：

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

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

2 个答案: