0

这是怎么回事？：手风琴工作正常，但选项卡显示在手风琴的右侧。

jQuery

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

CSS： 悬停盒

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

首先，让我们从刚刚加载的手风琴开始。

手风琴

在我单击“玻璃窗”后，会发生这种情况。

在此处输入图像描述

我做了什么：在过去的四五天里，我花了很多时间重新定位<div>标签，确保我的代码是正确的并涉足 CSS（特别是确保文本没有奇怪地对齐或者有一些愚蠢的关于如何图像已显示）。不是很具体，我知道。对于这个不那么简洁的问题，我深表歉意。

更新

我尝试使用 Dexter 的建议，但我仍然遇到文本对齐问题。

单击第 1 节后...

在此处输入图像描述

还有第 2 节...

在此处输入图像描述

如前所述，每个部分都应该在另一个之下。视频部分与手风琴分开，主页是页面底部导航列表的一部分（用作页脚）。

我已经明白，对于与手风琴无关的所有其他内容，这可能是我的 CSS 的问题。由于我不知道出了什么问题，我将只上传整个 CSS（与手风琴 CSS 的长度大致相同）......当然，那是“好的”。

4

1 回答 1

1

那么，这就是你想要达到的目标吗？

在这里看小提琴：http: //jsfiddle.net/GRATx/

编辑：

小提琴中的代码[使用悬停框功能更新]：http: //jsfiddle.net/GRATx/1/

于 2012-06-23T19:03:06.330 回答