0

页面html

<div class="outbox">
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet</div>
</div>

CSS

.outbox
{
    margin: 0;
    padding: 0;
}

.heading
{
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    float: right;
    width: 300px;
    height:25px; 
}



.content
{
  background-color: #FFCCCC;
}

查询

<script type="text/javascript">
$(document).ready(function() {
  $(".content").hide(); 
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
  });
});
</script>

当我单击内容的任何标题时，展开部分始终显示在页面顶部。如何在标题下方显示它？先感谢您。

4

4 回答 4

1

float: right;从标题中删除样式。除非它是故意的，但在这种情况下，你的问题听起来很奇怪。

于 2013-06-19T13:20:21.423 回答
1

您的标题元素是浮动的，但它们相邻的 div 不是。

只需删除或调整类的float: right;属性heading。

这是一个小提琴：

http://jsfiddle.net/GpJKe/

于 2013-06-19T13:21:16.663 回答
1

试试这个：

HTML

<div class="outbox">
    <div class="container">
        <p class="heading">Header-1 </p>
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="container">
        <p class="heading">Header-2</p>
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
    <div class="container">
        <p class="heading">Header-3</p>
        <div class="content">Lorem ipsum dolor sit amet</div>
    </div>
</div>

CSS

.outbox
{
    margin: 0;
    padding: 0;
}

.heading
{
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    width: 300px;
    height:25px; 
}
.container{
    float:right;
}


.content
{
  background-color: #FFCCCC;
}

小提琴 http://jsfiddle.net/LMWpZ/

于 2013-06-19T13:25:02.413 回答
0

浮动您的.content班级并添加clear:both到您的.headingand.content并尝试以下方法：

.heading {
    clear: both;
    background-color: #FF6666;
    border: 1px solid #FF5050;
    text-align: center;
    font-weight: bold;
    margin: 1px;
    padding: 3px 10px;
    cursor: pointer;
    float: right;
    width: 300px;
    height:25px;
}
.content {
    clear: both;
    float: right;
    background-color: #FFCCCC;
}

style="clear:both" 有什么用？

查看JSFiddle

于 2013-06-19T13:38:42.153 回答