Динамический аккордеон в javascript

Я работаю над динамическим аккордеоном. Я реализовал и протестировал, все работает нормально. и решил переместить код в мой проект, однако он немного отличается. Когда вы посмотрите на стрелку заголовка аккордеона (с левой стороны), в jsfiddle она центрирована, но в продукте она не центрирована. Интересно, как решить проблему.Динамический аккордеон в javascript

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

источник

2015-02-04 Anonymous

Может быть, если вы предоставите нам ссылку на этот сайт, мы сможем помочь вам ... на скрипке его просто все ок :) – KARC

Я добавил мой HTML и CSS код, приведенный выше. –

apaul34208, если вы внимательно прочитаете вопрос, вы поймете, что это совершенно другой вопрос. –

, вероятно, переписывают верхнее и позиционное свойство в продукте. Попробуйте это в вашем CSS ::

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

источник

2015-02-04 20:09:54 amerikanocls

все еще такой же вопрос –

Скопируйте и вставьте этот раз ... и дайте мне знать.

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

источник

2015-02-04 20:24:00 PeeJay

он не работал –

Вы можете поделиться прямой ссылкой на эту конкретную страницу? – PeeJay

Я считаю, что вы хотите, чтобы переместить значок заголовка (стрелка) вправо, чтобы по всей видимости, с центром в той части вкладки. Если это то, что вы хотите сделать, может помочь следующее редактирование CSS в вашем Html-файле. Это не идеально, но визуально визуально показывает, что стрелка «принадлежит» с текстом вкладки.

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

источник

2015-02-05 04:30:07 williamdnapier

Динамический аккордеон в javascript

ответ

Смежные вопросы