Question

我通过点击链接显示div，但现在我想再次点击它时隐藏它。

这就是我目前的情况：

$(document).ready(function() {
    $('#our-future-intro-slide').click(function() {
      //$(".our-future-intro").delay(2400).slideDown(3600);
      $(".our-future-intro").slideDown(200);
    });
  });

因此，每次用户选择链接时，它都会向下滑动并显示div，或者向上滑动并消失（或者只是消失），具体取决于当前状态。

更新：我得到了它的工作，感谢slideToggle，现在我想知道我是否可以将其分解为更少的代码。

我将slidetoggle设置为页面的4个不同部分，每个div都有自己的id。

以下是代码：

$(document).ready(function() {
  $('#our-future-intro-slide').click(function() {
    //$(".our-future-intro").delay(2400).slideDown(3600);
    $(".our-future-intro").slideToggle(200);
  });
  $('#strategic-planning-click').click(function() {
    $("#strategic-planning").slideToggle(200);
  });
  $('#student-learning-click').click(function() {
    $("#student-learning").slideToggle(200);
  });
  $('#institutional-assessment-click').click(function() {
    $("#institutional-assessment").slideToggle(200);
  });
});

感谢任何帮助。

Answer 1

答案是.slideToggle()：）

Answer 2

jQuery有一个$(element).toggle(handler, handler)函数可以提供帮助。

Answer 3

它也可以通过javascript和css完成。

<a href='#' onclick='functionname(".$auniquenumber.")'> your link</a>
 <div id="yourid_<?=$uniquenumber>" style="display:none">your content </div>

定义这样的函数： -

<script>
function functionname(uniquenumberpassed)
{
var anyvariable=document.getElementById("yourid"+uniquenumberpassed);
if(anyvariable.getStyle('display')=='none')
{
anyvariable.setStyle({display:'block'});
}
else
{
anyvariable.setStyle({display:'none'});
}
}
</script>

单击链接后需要隐藏/滑动div

3 个答案: