Jquery 如何调整手风琴的位置，使菜单不会移动？

这是

我试图在一个手风琴内创建一个jQueryUI选项卡，但没有使用jQuery提供的CSS文件。因此，它导致图像上显示的情况

CSS

HTML

---

每当我展开项目菜单时，功能都会移到选项卡内容所在的右侧。我试图将位置改为相对，将高度样式改为“内容”，但事情没有改变。如果不使用jQuery CSS文件，我应该怎么做才能解决这个移位问题，因为我被要求遵循特定的样式。

没有收到您的问题？请提供更多信息。tyI创建了一个手风琴菜单，其中包含名为ITEMS的选项卡，另一个没有名为FEATURES的选项卡。如图所示，每当我展开项目以显示选项卡时，功能都会向右移动，我想在那里显示选项卡的内容。如果我使用jQuery ui CSS文件，问题可以解决，但我希望使用我自己的CSS文件，所以我希望有人能帮助我解决问题。对不起，我还是不明白你的意思，或者可能是你的小提琴不正确。你如何展开项目？请把那个也加在小提琴上。。实际上我可以在小提琴上做扩展。不知何故，它可能无法在你的电脑中工作，但我为你捕获了两张图像。截图？它是来自JSFIDLE还是来自您的站点？就像在你的JSFIDLE中一样，什么都没发生。。

#accordion, #tabs{
    float: left;
}
#accordion{
    width:40%;
}
.ui-tabs-vertical {
    width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left;
     width: 12em; 
}
.ui-tabs-vertical .ui-tabs-nav li {
    clear: left; 
    width: 100%; 
    border-bottom-width: 1px !important; 
    border-right-width: 0 !important; 
    margin: 0 -1px .2em 0; 
}
.ui-tabs-vertical .ui-tabs-nav li a {
    display:block; 
    color:rgb(51,51,51);
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0; 
    padding-right: .1em; 
    border-right-width: 1px; 
}
.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em; 
    float: right;
    width: 40em;
}

<div id="accordion">
            <h3>ITEMS</h3>
            <div id="ver_tab">
                <ul>
                    <li><a href="#ver_1">Item</a></li>
                    <li><a href="#ver_2">Item</a></li>
                    <li><a href="#ver_3">Item</a></li>
                    <li><a href="#ver_4">Item</a></li>
                    <li><a href="#ver_5">Item</a></li>
                    <li><a href="#ver_6">Item</a></li>
                    <li><a href="#ver_7">Item</a></li>
                    <li><a href="#ver_8">Item</a></li>
                    <li><a href="#ver_9">Item</a></li>
                </ul>
                <div id="ver_1">
                    <p>test</p>
                </div>
                <div id="ver_2">
                </div>
                <div id="ver_3">
                </div>
                <div id="ver_4">
                </div>
                <div id="ver_5">
                </div>
                <div id="ver_6">
                </div>
                <div id="ver_7">
                </div>
                <div id="ver_8">
                </div>
                <div id="ver_9">
                </div>
            </div>
            <h3>FEATURES</h3>
            <p>Coming soon!</p>
        </div>

$(function(){
    $('#accordion').accordion({
        collapsible:true,
        heightStyle: "content"
    });
    $('#ver_tab').tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
    $('#ver_tab li').removeClass("ui-corner-top").addClass("ui-corner-left");
});