Jump to content
  • 0

evanre
 Share

Question

Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки).

<ul class="accordion">    <li class="accordion_item">        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-01" checked/>         <label class="accordion_trigger" for="toggle-01"><div  class="accordion-arrow"></div><span>Accordion Title 1</span></label>         <div class="accordion_target"><p>text1</p></div>    </li>    <li class="accordion_item">        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-02"/>         <label class="accordion_trigger" for="toggle-02"><div  class="accordion-arrow"></div><span>Accordion Title 2</span></label>         <div class="accordion_target"><p>text2</p></div>    </li>    <li class="accordion_item">        <input type="radio" class="accordion_toggle" name="accordion-01" id="toggle-03"/>         <label class="accordion_trigger" for="toggle-03"><div  class="accordion-arrow"></div><span>Accordion Title 3</span></label>         <div class="accordion_target"><p>text1</p></div>    </li></ul>
ul.accordion {list-style: none;}li.accordion_item {border-bottom: 1px solid #d2d2d2;} /* Элемент label который запускает открыть/закрыть.*/label.accordion_trigger {    font: normal 14px "Droid Serif";    display: block;    background-color: #fff;    font-weight: bold;    cursor: pointer;    padding: 0.5rem;}div.accordion-arrow{    float: left;    background:url(../images/sprites.png) no-repeat;    background-position:-85px -95px;    width:24px;    height:24px;    margin-right: 15px;}/*элементы radio/checkbox всегда должны быть скрыты c помощью нулевых значений свойства clip*/.accordion_toggle {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;}/**скрытое содержание аккордеона c помощью нулевых значений свойства clip*/.accordion_target {    border: 0;    clip: rect(0 0 0 0);    height: 1px;    margin: -1px;    overflow: hidden;    padding: 0;    position: absolute;    width: 1px;    background-color: #fff;    color: #333;}/* когда переключатель checked на radio, показать содержимое аккордеона.*/.accordion_toggle:checked ~ div.accordion_target {    position: static;    overflow: visible;    width: auto;    height: 170px;    margin: auto;    clip: auto;    padding: 15px 15px 0 15px;}.accordion_toggle:checked ~ div.accordion-arrow{    background:url(../images/sprites.png) no-repeat;    background-position:-85px -65px;}

 

Все работает кроме класса ".accordion-arrow", этот класс подразумевает под собой стрелку которая находится рядом с заголовком одного из 3х элементов и меняется в зависимости от состояния радио-инпута.

Стрелка есть, но на всех элементах она отображается как "не-активная". т.е. когда элемент чекнутый, стрелка не меняется.

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки).

 

Чем скорее дадите ссылку на код в сюда или сюда, тем скорее вам помогут.

Edited by Jack_V
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By SHADOWtop1gg
      суть проблемы: создано два элемента - Аккордеон с 3 раскрывающимися пунктами и кнопка при нажатии на которую происходит так же раскрытие дочернего элемента. все работает исправно но если я в html, код аккордеона расположу над кодом кнопки то при открытии элемента аккордеона кнопка сместится вниз и наоборот. мне нужно это исправить любым способом. ошибок в коде нет мне просто нужен вариант.
       
    • By guumee
      У меня стоит простой бутстраповский аккордеон, при нажатии открывается одна и закрывается другая скрытая информация. Но есть проблема, когда в скрытом содержимом большое количество информации, при попытке открытии следующей, аккордеон сдвигается наверх. Нужен скрипт для фиксированного заголовка аккордеона. Смогли бы вы помочь с этим? Cнизу код html
      <div class="panel-group accordion" id="panel-651270"> <div class="panel panel-default"> <div id="yazyk-kurs" class="panel-heading"> <i class="fa fa-globe fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-366587" > Языковые курсы </a> </div> <div id="panel-element-366587" class=" panel-collapse collapse"> <div class="panel-body "> <table align="center" class="table table-bordered table-hover table-condensed col-xs-12" > <thead> <tr class="info" align="center" valign="middle"> <th align="center" valign="middle">Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Английский язык <br> <small>(I уровень)</small></td> <td><small>182 учебных часа <br> 4 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>698</td></tr> <tr> <td> Английский язык <br> <small>(II-VI уровень)</small></td> <td><small>142 учебных часа <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>546</td></tr> <tr> <td> Практический курс Английского языка <small>(I уровень)</small></td> <td><small>72 учебных часа <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>276</td></tr> <tr> <td> Практический курс Английского языка <small>(II-VI уровень)</small></td> <td><small>144 учебных часа <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>553</td></tr> <tr> <td> Английского языка для работников Банка </td> <td><small>122 учебных часа <br> 3 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>468</td></tr> <tr> <td> Туркменский язык, Французский язык, <br> Арабский язык <small>(I-III уровень)</small> </td> <td><small>142 учебных часа <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>545</td></tr> <tr> <td> Русский язык<br> <small>(I-II уровень)</small> </td> <td><small>160 учебных часов <br> 4 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>615</td></tr> <tr> <td> Немецкий язык<br> <small>(I-IV уровень)</small> </td> <td><small>180 учебных часов <br> 4 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>691</td></tr> <tr> <td> Китайский язык<br> <small>(I уровень)</small> </td> <td><small>148 учебных часов <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>568</td></tr> <tr> <td> Китайский язык<br> <small>(I-III уровень)</small> </td> <td><small>136 учебных часов <br> 4 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>523</td></tr> <tr> <td> Турецкий язык<br> <small>(I уровень)</small> </td> <td><small>72 учебных часа <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>276</td></tr> <tr> <td> Турецкий язык<br> <small>(II уровень)</small> </td> <td><small>68 учебных часов <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>261</td></tr> <tr> <td> Персидский язык<br> <small>(I-II уровень)</small> </td> <td><small>74 учебных часа <br> 2 месяца. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td><td>284</td></tr> </body> </table> </div> </div> </div> <div class="panel panel-default"> <div id="komp-kurs" class="panel-heading"> <i class="fa fa-desktop fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-435532">Основы компьютерных технологий</a> </div> <div id="panel-element-435532" class="panel-collapse collapse"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed col-xs-12"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Microsoft Windows; Microsoft Office: Word, Excel, PowerPoint, Internet</td> <td><small>86 учебных часов <br> 1,3 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td><td>403</td></tr> <tr> <td> Техническое обслуживание и настройка ПЭВМ</td> <td><small>72 учебных часа <br> 1,2 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td><td>338</td></tr> <tr> <td> Adore PhotoShop</td> <td><small>42 учебных часа <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>197</td></tr> <tr> <td> CorelDraw</td> <td><small>48 учебных часа <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>252</td></tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag--> <div class="panel panel-default"> <div id="programming" class="panel-heading"> <i class="fa fa-code fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-4355321">Программирование</a> </div> <div id="panel-element-4355321" class=" panel-collapse collapse"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed col-xs-12"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr><td> Программирование на С/С++ </td> <td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td><td> 704 </td></tr> <td>Программирование в HTML</td><td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td><td>704</td></tr> <tr><td> Программирование на C# и в среде NET</td> <td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td> <td>704</td></tr> <tr><td>Программирование на Java и JavaScript</td> <td><small>150 учебных часа <br> 2 месяцa. 20 ч. в неделю. <br> 5 раза по 4 уч.ч. </small></td><td>704</td> </tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag--> <div class="panel panel-default"> <div id="intellekt-kurs" class="panel-heading"> <i class="fa fa-connectdevelop fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-4355322">ИНТЕЛЛЕКТУАЛЬНОЕ РАЗВИТИЕ</a> </div> <div id="panel-element-4355322" class="-collapse collapse"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Техника быстрого чтения <small>(I уровень)</small> </td> <td><small>48 учебных часов <br> 1 месяц. 12 ч. в неделю. <br> 4-5 раз по 3 уч.ч. </small><td>200</td></tr> <tr> <td> Техника быстрого чтения <small>(II уровень)</small> </td> <td><small>132 учебных часа <br> 3 месяц. 12 ч. в неделю. <br> 4-5 раз по 3 уч.ч. </small></td><td>550</td></tr> <tr> <td> Ораторское искусство</td> <td><small>54 учебных часа <br> 1,5 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>225</td></tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag--> <div class="panel panel-default"> <div id="psychology-kurs" class="panel-heading"> <i class="fa fa-graduation-cap fa-lg" aria-hidden="true"></i> <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-651270" href="#panel-element-4355323">ПСИХОЛОГИЯ И ПЕДАГОГИКА</a> </div> <div id="panel-element-4355323" class="panel-collapse collapse st-content"> <div class="panel-body "> <table class="table table-bordered table-hover table-condensed"> <thead> <tr class="info"> <th>Наименование курса </th><th>кол-во учебных часов.<br> Продолжительность курса</th><th>стоимость курса <br> <small>(в манатах)</small></th> </tr> </thead> <body> <tr> <td> Практическая психология </td> <td><small>220 учебных часов <br> 3 месяц. 20 ч. в неделю. <br> 5 раз по 4 уч.ч. </small></td> <td>900</td></tr> <tr> <td> Повышение квалификации педагогических кадров системы среднего профессионального образования</td><td><small>142 учебных часа <br> 2 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td> <td>590</td></tr> <tr> <td> Этика и культура делового общения </td><td><small>36 учебных часов <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td> <td>150</td></tr> <tr> <td> Псилого-педагогический курс "ПРАКТИЧЕСКАЯ ПСИХОЛОГИЯ ДЛЯ ПОДРОСТКОВ" </td> <td><small>62 учебных часа <br> 2 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>258</td></tr> <tr> <td> Псилого-педагогический курс "ПРАКТИЧЕСКАЯ ПСИХОЛОГИЯ ДЛЯ РОДИТЕЛЕЙ" <small>(I-II уровень)</small> </td> <td><small>56 учебных часов <br> 1,5 месяца. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>233</td></tr> <tr> <td> Псилого-педагогический курс "ПРАКТИЧЕСКАЯ ПСИХОЛОГИЯ ДЛЯ РОДИТЕЛЕЙ" <small>(III-IV уровень)</small> </td> <td><small>48 учебных часов <br> 1 месяц. 12 ч. в неделю. <br> 4 раза по 3 уч.ч. </small></td><td>200</td></tr> <tr> <td> Социально-Психологический курс "СЕМЬЯ" </td><td><small>270 учебных часов <br> 7,5 месяцев. 9 ч. в неделю. <br> 3 раза по 3 уч.ч. </small></td> <td>1123</td></tr> <tr id="sekret_referent"> <td> Курс "СЕКРЕТАРЬ-РЕФЕРЕНТ" </td> <td><small>82 учебных часа <br> 1,5 месяца. 15 ч. в неделю. <br> 5 раз по 3 уч.ч. </small></td><td>315</td></tr> </body> </table> </div> </div> </div> <!-- open-closed panel div ending tag-->  
    • By Alex.a
      <div class="box-two"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> .box-two:nth-child(2n) { color: red; } Ни в какую не хочет работать, браузер chrome, редактор brackets. First-child и last-child тоже не работают, что может быть не так?
    • By fiver
      Здравствуйте!
      Все кто знаком с бутстрап, наверняка пользовались встроенным аккордеоном (collapse.js). Штука весьма полезная и очень удобная. Но вот кое какой функционал не доведен до ума. А именно возможность перехода к нужному развернутому слою, и дальнейшей работе с меню аккордеона. 
      Подробнее: есть страница (PAGE1) на которой 10 кнопок и 10 слоев. Слои имеют id по порядку  (el1, el2, el3, el4, el5 и т.д.). Есть кнопки которые открывают эти слои (Салаты, Супы, Гарниры ...).
      Есть другая страница, на которой есть ссылки типа: /PAGE1/?menu=sreda#el3. Надо что бы при переходе с этой страницы на PAGE1 открылся элемент 3.
      решение такое существует и работает. Извлекает хэш и открывает нужный слой, если хэш пустой, то открывает первый слой.
      <script> $(function(){ var hash = window.location.hash; $('.panel-collapse').hide(); $('.panel-collapse').each(function(){ $(this).removeClass('in'); }); if (hash) { $(hash).show().addClass('in'); } else { $('#el1').show().addClass('in'); } }); </script> Но после перехода не работает меню на странице. Т.к. URL имеет вид /PAGE1/?menu=sreda#el3, то 3 слой всегда открыт. А остальные слои просто не работают.
      Прошу вашей помощи, доработать так, что бы и нужный слой открывался, и все остальное на странице после этого работало.
      Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy