选项卡的标题显示在垂直折叠的右侧 [英] Title of tabs appear on the right side of vertical accordion

问题描述

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

jQuery

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





---

CSS ：

编辑：

使用hoverbox功能更新的代码： http ：//jsfiddle.net/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: http://jsfiddle.net/GRATx/

EDIT:

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

这篇关于选项卡的标题显示在垂直折叠的右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！