选项卡的标题显示在垂直折叠的右侧

本文介绍了选项卡的标题显示在垂直折叠的右侧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

发生了什么？：手风琴工作正常，但手风琴右侧显示标签。

jQuery

$（document）.ready（function（）{ $ accordion .title）。click（function（）{ $（this）.next（。accordion .details）。slideToggle（500）}）next（）。 }）;

CSS ：

编辑：

使用hoverbox功能更新的代码： http ：//jsfiddle/GRATx/1/

What's going on?: The accordion is working properly, but the tabs show up on the right side of the accordion.

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: A sample for one image.

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

First, let's start off with a just loaded accordion.

After I click "Glass Windows", this is what happens.

What I have done: For the past four or five days I have been spending many hours relocating <div> tags, making sure my code is correct and dabbling with the CSS (specifically making sure the text wasn't aligned oddly or there was something goofy about how the images were displayed). Not very specific, I know. I apologize for the not so short and concise question.

Update

I attempted to use Dexter's suggestion, but I still keep having issues with the text alignment.

After clicking on Section 1...

And Section 2...

As stated before, each section should be underneath one another. The Videos section is separate from the accordion and Home is a part of the navigation list at the bottom of the page (serves as the footer).

I've come to understand that this may be an issue with my CSS for everything else not accordion related. Since I have no idea what's the problem, I will just upload the entire CSS (which is about the same length as the accordion CSS)... if of course, that is 'okay'.

解决方案

So, is this what you're trying to achieve?

See fiddle here: jsfiddle/GRATx/

EDIT:

Code in fiddle [updated with hoverbox functionality]: jsfiddle/GRATx/1/