Jquery положения содержания тумблера

Question

страница 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; 
} 

Jquery

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

При нажатии любого заголовка содержимого, расширенная часть всегда появляется в верхней части страницы , Как я могу отобразить его под заголовком? Заранее спасибо.

Answer 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; 
} 

Fiddlehttp://jsfiddle.net/LMWpZ/

Answer 2

Удалите из своего заголовка стиль float: right;. Если это не так специально, но в этом случае ваш вопрос звучит странно.

Answer 3

Элементы заголовка плавают, но их соседние разделители не являются.

Просто удалите или отредактируйте float: right; property of your heading класс.

Вот скрипку:

http://jsfiddle.net/GpJKe/

Answer 4

Float право ваш .content класс и добавить clear:both к вашему .heading и .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; 
} 

What is the use of style=“clear:both”?

Отъезд JSFiddle