Jquery滑动切换

基本上，我试图实现的是滑动切换效果，但不完全是

例如，我有一个高度设置为200px的div和一个带有嵌套img标记的锚点。当用户单击图像时，div将扩展到500px的高度，并显示ul中的嵌套内容

要关闭div，右下角有一个close图标，它是一个包含背景图像的锚点。单击时，div将滑回其先前的200px高度

欢迎所有建议

以下是我的HTML帮助：

谢谢

Jordy

使用jQuery：

var $getStarted = $('#getstarted');
$('#open img').click(function(){
  if($getStarted.hasClass('opened')) {
    $('#close').trigger('click');
  } else {
     $getStarted.animate({height:'+=300px'},500,function(){
      // you're open
        $getStarted.addClass('opened');
     });
  }
  return false;
});
$('#close').click(function(){
  if($getStarted.hasClass('opened')) {
    $getStarted.animate({height:'-=300px'},500,function() {
      // you're closed again
       $getStarted.removeClass('opened');
    });
  }
  return false;
});

这个怎么样

示例如下：

谢谢， 使用jQuery的MyStream

：

var $getStarted = $('#getstarted');
$('#open img').click(function(){
  if($getStarted.hasClass('opened')) {
    $('#close').trigger('click');
  } else {
     $getStarted.animate({height:'+=300px'},500,function(){
      // you're open
        $getStarted.addClass('opened');
     });
  }
  return false;
});
$('#close').click(function(){
  if($getStarted.hasClass('opened')) {
    $getStarted.animate({height:'-=300px'},500,function() {
      // you're closed again
       $getStarted.removeClass('opened');
    });
  }
  return false;
});

这个怎么样

示例如下：

谢谢， MyStream

切换（）； 或者，如果您希望它稍微短一点：

function toggle(elm)
{
    var height = document.getElementById(elm);
    if(height == 200) {
        elem.style.height = 500;
    }

    if(height == 500) {
        elem.style.height = 200;
    }
    return false;
}

您可以通过标记的onclick=“toggle（'yourlementtoogle'）使用此函数

希望它有助于切换（）； 或者，如果您希望它稍微短一点：

function toggle(elm)
{
    var height = document.getElementById(elm);
    if(height == 200) {
        elem.style.height = 500;
    }

    if(height == 500) {
        elem.style.height = 200;
    }
    return false;
}

您可以通过标记的onclick=“toggle（'yourlementtoogle'）使用此函数

希望它有帮助

试试这个： jQuery：

顺便说一句，对于以上内容，您可以将高度值更改为所需的值

CSS:

应用：

Activation: <br> <div class="panel_button" style="display: visible;"><a href="#panel">blahblahblah</a></div>

激活：

内容和退出按钮：

 <div id="panel"> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">EXIT BUTTON TEXT OR STUFF.</a></div>
  <div id="panel_contents">
WHAT YOU SEE WHEN THIS THING DROPS DOWN. LIKE TEXT STUFF. 
</p>
</div> 
</div></div>

当这东西掉下来的时候你看到了什么。比如文本内容。

试试这个： jQuery：

顺便说一句，对于以上内容，您可以将高度值更改为所需的值

CSS:

应用：

Activation: <br> <div class="panel_button" style="display: visible;"><a href="#panel">blahblahblah</a></div>

激活：

内容和退出按钮：

 <div id="panel"> 
<div class="panel_button1" id="hide_button" style="display: visible;"><a href="#">EXIT BUTTON TEXT OR STUFF.</a></div>
  <div id="panel_contents">
WHAT YOU SEE WHEN THIS THING DROPS DOWN. LIKE TEXT STUFF. 
</p>
</div> 
</div></div>

当这东西掉下来的时候你看到了什么。比如文本内容。

以下是我在常见问题解答中使用的一些代码，但其工作原理与您描述的完全相同

jQuery：

<script type="text/javascript">
    function ToggleFAQ(faq) {
        $("#faq" + faq).slideToggle(500);
    }
</script>

功能切换常见问题（faq）{
$（#常见问题+常见问题）。幻灯片切换（500）；
}

HTML:

回答这里

保存答案（faq1）的div从一开始就被隐藏。您可以设置一个类，也可以在开始时设置隐藏它的方式

---

祝你好运

以下是我在常见问题解答中使用的一些代码，但其工作原理与您描述的完全相同

jQuery：

<script type="text/javascript">
    function ToggleFAQ(faq) {
        $("#faq" + faq).slideToggle(500);
    }
</script>

功能切换常见问题（faq）{
$（#常见问题+常见问题）。幻灯片切换（500）；
}

HTML:

回答这里

保存答案（faq1）的div从一开始就被隐藏。您可以设置一个类，也可以在开始时设置隐藏它的方式

---

祝你好运

谢谢MyStream-将尝试一下并让您知道！：-）哈，是的，我已经做出了改变；-）MyStream-谢谢你的代码，唯一的问题是每次我点击#打开img，div都会不断扩展300px和另一个300px，这会将内容向下推-有什么方法可以避免这种情况发生吗？嗨，Jordy，我已经将答案更新为只有在“打开”时才打开，如果你在“打开”时点击它，它就会触发关闭。这样更好吗？没必要-我已经用.show（）和.hide（）对它进行了排序-谢谢你的帮助！！：-）谢谢MyStream-将尝试一下并让您知道！：-）哈，是的，我已经做出了改变；-）MyStream-谢谢你的代码，唯一的问题是每次我点击#打开img，div都会不断扩展300px和另一个300px，这会将内容向下推-有什么方法可以避免这种情况发生吗？嗨，Jordy，我已经将答案更新为只有在“打开”时才打开，如果你在“打开”时点击它，它就会触发关闭。这样更好吗？没必要-我已经用.show（）和.hide（）对它进行了排序-谢谢你的帮助！！：-）