發生了什麼事？：手風琴正常工作，但標籤顯示在手風琴的右側。標籤標題出現在垂直手風琴的右側

jQuery的

$(document).ready(function(){ 
    $(".accordion .title").click(function(){ 
     $(this).next(".accordion .details").slideToggle(500) 
    }).next().hide(); 
});

CSS：Hoverbox

.hoverbox 
{ 
    cursor: default; 
    list-style: none; 
} .hoverbox a { 
    padding-top: 5px; 
    cursor: default; 
    text-decoration: none; 
    color: black; 
} .hoverbox a .preview { 
    display: none; 
} .hoverbox a:hover .preview { 
    display: block; 
    position: absolute; 
    top: -33px; 
    left: -45px; 
    z-index: 1; 
} .hoverbox img { 
    vertical-align: top; 
    height: 125px; 
} .hoverbox li { 
    display: inline; 
    float: left; 
    margin: 3px; 
    padding: 5px; 
    position: relative; 
    text-align: right; 
    text-decoration: none; 
} .hoverbox .preview { 
    border-color: #000; 
    height: 300px; 
} .gallery { 
    width: 100%; 
}

HTML：一張圖片的樣本。

<div class="accordion"> 
    <div class="title"><h2></h2></div> 
    <ul class="details"> 
    <div class="gallery"> 
    <ul class="hoverbox"> 
     <li> 
     <a href="#"> 
      <img src="pictures/1.jpg" class="thumbnail"/> 
      <img src="pictures/1.jpg" class="preview"/></br> 
      Compass 
     </a> 
     </li> 
    </ul> 
    </div> 
    </ul> 
</div>

首先，讓我們先從一個剛裝入手風琴。

Accordion

後，我點擊「玻璃窗」，這是發生了什麼。

enter image description here

我做了什麼：在過去的四五天，我一直花很多時間搬遷<div>標籤，確保我的代碼是正確的，並與CSS涉足（特別是確保文本並不是很奇怪，或者有關圖像顯示方式的東西很愚蠢）。我知道不是很具體。我爲不那麼簡短的問題表示歉意。

更新

我嘗試使用德克斯特的建議，但我仍然保持有與文本對齊問題。

點擊第1後...

enter image description here

和第2 ...

enter image description here

如前所述，每個部分應該是下彼此。視頻部分與手風琴不同，主頁是頁面底部的導航列表（用作頁腳）的一部分。

我已經明白，這可能是我的CSS與一切手風琴沒有關係的問題。由於我不知道有什麼問題，我只會上傳整個CSS（與手風琴CSS的長度大致相同）......如果當然，那是'好的'。

來源

2012-06-23 Rob

你可以分享鏈接到烏爾網站 – SVS

什麼是你想實現的，如果我可能會問？ –

@DexterHuinda儘管手風琴還沒有完全完美的設計，但我想[簡單手風琴]（http://docs.jquery.com/UI/Accordion）。更具體地說，我希望文本位於每個圖庫下面（燈罩將在Glass Windows中的最後四幅圖像下）。當我們談論這個問題時，我一直無法弄清楚如何一次打開一個標籤;請參閱爲簡單手風琴提供的鏈接。 – Rob

那麼，這是你想要實現的嗎？

見小提琴這裏：http://jsfiddle.net/GRATx/

編輯：

代碼在撥弄[更新與hoverbox功能]：http://jsfiddle.net/GRATx/1/

來源

2012-06-23 19:03:06

'.hoverbox'類允許用戶將鼠標懸停在圖像上以放大圖像。我認爲這可能與格式不正確有關。 [Hoverbox]（http://host.sonspring.com/hoverbox/）。在添加此功能之前，我有相當於你的jsfiddle。 – Rob

@MikeDtrick看到這個/我的答案上面。更新小提琴在這裏，顯示與手風琴集成的hoverbox：http://jsfiddle.net/GRATx/1/ –

好吧，我明白了。問題不在於CSS文本，而在於手風琴CSS。我將使用您使用的功能。還有一個愚蠢的問題，我可以使用這種方法來設計手風琴嗎？我想最好的行動方式是使用[用於默認手風琴的CSS]（http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css ）並從那裏出發。 – Rob

標籤標題出現在垂直手風琴的右側

更新

回答

相關問題