Question

我一直在研究动态手风琴。我已经实施并测试过，一切正常。并决定将代码移入我的项目，但它略有不同。当您查看手风琴标题箭头（在左侧）时，在jsfiddle中它居中，但在产品中，它不居中。我想知道如何解决这个问题。

这是jsfiddle原型 enter image description here

在安装jquery的产品中：

产品代码：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="height:98%">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>

        .table-holder {
    width:100%;
}
.table-holder table {
    margin:0 auto;
}

#accordion li > text{
    display:inline-block; 
    text-align : center;

}
#accordion .formationName {
    width:200px; 
    text-align : center;
}

#accordion .bitSize {
    width:200px; 
    text-align : center;
}

#accordion .bitType {
    width:100px; 
    text-align : center;
}

ul
{
    list-style-type: none;
}

#accordion li{
    display:inline-block;
    margin:0 0 0 20px;  
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 20px;
}

th, td {
    padding: 15px;
    text-align: left;
    font-size:12px;
}
.ui-accordion ul {
    margin: 0;
}
#refresh, #build{
    float:right

}

#build
{
     margin-left:5px;
}


.ui-accordion .ui-accordion-header .ui-accordion-header-icon{
position: absolute !important;
top: 50% !important;
}
 </style>

<link rel="stylesheet" href="//code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css">
     <script src="//code.jquery.com/jquery-1.9.1.js"></script>
     <script src="//code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>


<body>

<div class="accordion-expand-holder">
    <button type="button" id="build">Build</button>
    <button type="button" id="refresh">Refresh</button>
    <button type="button" class="open">Expand all</button>
    <button type="button" class="close">Collapse all</button>
    <div id="accordion">
    </div>
</div>

这是产品的snapsot enter image description here

Answer 1

可能会覆盖产品中的top和position属性。在CSS ::

中试试这个

.ui-accordion .ui-accordion-header .ui-accordion-header-icon{
position: absolute !important;
top: 50% !important;
}

Answer 2

完全复制并粘贴...并告诉我。

.ui-accordion .ui-accordion-header .ui-accordion-header-icon{
position: absolute !Important;
top: 50% !Important;
}

Answer 3

我相信您想将标题图标（箭头）向右移动，以显示在标签的该部分的中心位置。如果这是你想要做的，你的Html文件中的以下CSS编辑可能会有所帮助。它并不完美，但确实在视觉上给出了箭头“属于”标签文字。

<style type="text/css">
    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {
        left: 20%;
    }
</style>

javascript中的动态手风琴

3 个答案: