jQuery的切換內容的位置

HTML頁面jQuery的切換內容的位置

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

當我點擊內容的任何標題，擴展部分總是出現在頁面的頂部。我如何在標題下方顯示它？先謝謝你。

來源

2013-06-19 Yass

試試這個：

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-19 13:25:02

+1 N冰的方法。 – Praveen

謝謝，它的作品。唯一的問題是存在多行時內容不匹配。我固定內容部分的設置寬度如下。。content { background-color：#FFCCCC; width：300px; } – Yass

從標題中刪除float: right;風格。除非故意存在，但在這種情況下，你的問題聽起來很奇怪。

來源

2013-06-19 13:20:21

您的標題元素是浮動的，但它們的相鄰div不是。

只需刪除或調整heading類的float: right;屬性即可。

這裏有一個小提琴：

http://jsfiddle.net/GpJKe/

來源

2013-06-19 13:21:16

浮動權的.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

來源

2013-06-19 13:38:42 Praveen

jQuery的切換內容的位置

回答

相關問題