发生了什么事？：手风琴正常工作，但标签显示在手风琴的右侧。标签标题出现在垂直手风琴的右侧

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

标签标题出现在垂直手风琴的右侧

更新

回答

相关问题