Question

基本上我想要实现的是滑动切换效果，但并不完全。

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

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

欢迎所有建议

这是我的HTML帮助：

enter image description here

谢谢，

的Jordy

Answer 1

使用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;
});

这个怎么样？

此处示例：http://jsfiddle.net/huF73/

谢谢， MyStream

Answer 2

切换（）; 或者如果你想要它更短一些：

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

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

您可以通过＆lt; a＆gt;的onclick =“toggle（'yourElementToToggle'）”来使用此功能。标签

希望有所帮助

Answer 3

试试这个： jQuery的：

$(document).ready(function() {
    $("div.panel_button").click(function(){
        $("div#panel").animate({
            height: "100%"
        })
                $("div#main").hide();



    }); 

   $("div#hide_button").click(function(){
        $("div#panel").animate({
            height: "0px" 
        }, "fast");
                $("div#content").show();


   });  

});

BTW，对于上述情况，您可以将高度值更改为所需的值。

CSS：

.panel_button1 a {
YOUR STYLING HERE } /* for the exit button */

.panel_button {
width: YOUR VALUE HERE;
position: relative; } /* for the activation button styling */

.panel_button a {
YOUR STYLING HERE }
/* for the activation button styling */

#panel {
position: fixed;
width: VALUE OF YOUR CHOICE;
height: 0%; /*THIS CANNOT CHANGE UNLESS YOU WANT IT TO START AT A SPECIFIC HEIGHT. IF YOU WANT IT HIDDEN, DO NOT CHANGE IT*/ 
overflow: hidden;
z-index: 25;
background-color: COLOUR OF YOUR CHOICE;
} /* drop down colour */

#panel_contents {
height: VALUE OF YOUR CHOICE;
width: VALUE OF YOUR CHOICE;
position: absolute;
    z-index: 999; } /* drop down text */

#content {
CONTENT STUFF HERE }

应用：

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

内容＆amp;退出按钮：

 <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>

Answer 4

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

jQuery的：

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

HTML：

<a href="javascript:void(0)" onclick="ToggleFAQ('1')">QUESTION HERE</a>
<div id="faq1">
    <p>
        ANSWER HERE
    </p>
    <p>
        <a href="javascript:void(0)" onclick="ToggleFAQ('1')">- Hide</a>
    </p>
</div>

持有答案的div（faq1）从一开始就是隐藏的。你可以设置一个类，或者你想在开头隐藏它。

祝你好运！

Jquery幻灯片切换

4 个答案: