需要帮助jQuery Hidden Div

时间:2009-08-05 11:22:23

标签: jquery html css

我有一个jquery代码,当我点击一个文本的句子时,另一个div出现在它上面,但div只是在原始div的顶部,但我想要的是新的div推动orignal div用它。

这是代码

HTML:

  <div id="social">Content to Show</div>  
  <div id="joinus">  <center><a id="activator" href="#">Join Us</a></center></div>
  <div id="outerbody">

CSS:

#joinus {
    background-image:url(../IMG/JoinUsBottom.png);
    width:327px;
    height:83px;
    position:absolute;
    left:755px;
    font-size:30px;
}
#social {
    background-image:url(../IMG/JoinUsTop.png);
    width:327px;
    heght:99px;
    position:absolute;
    left:755px;
    display:none;
}

jQuery代码:

 <script type="text/javascript">
        $(function() {
            $("#activator").click(function(){
                $("#social").slideToggle("slow");
            });
        }); 
 </script>

由于

3 个答案:

答案 0 :(得分:1)

将两者放在父div中,该div位于绝对位置。

<div id="wrapper">
<div id="social">Content to Show</div>  
<div id="joinus">  <center><a id="activator" href="#">Join Us</a></center></div>
</div>

#joinus {
    background-image:url(../IMG/JoinUsBottom.png);
    height:83px;
    font-size:30px;
}
#social {
    background-image:url(../IMG/JoinUsTop.png);;
    height:99px;
    display:none;
}
#wrapper {
    width:327px
    left:755px;
    position:absolute;
}

答案 1 :(得分:0)

在你的例子中,你没有#outerbody的开场div。 无论如何,我的建议是:

<div id=outer style='position:absolute'>
  <div id=moreinfo style='position:nothing!, display:none'> bla bla bla
  <div onclick=showmoreinfo>button</div>
</div>

答案 2 :(得分:0)

这是一个示例页面:http://www.capsule.hu/help/slide_content.html - 只需将两个div包装成一个包装器div,并使用position:absolute属性为相同的水平尺寸...但检查源并且它将是明确的< / p>