код аккордеона не работает должным образом, как это исправить?

Question

код аккордеона не работает должным образом, как это исправить?

0

Я пытаюсь сделать свой собственный аккордеон для моего шаблона страницы портфолио, для моего веб-сайта. xtractweb.com, как только любой щелчок на accodion, соответствующий фрагмент работы будет показан и т.д.... пока я пытаюсь с этим демо, но я застрял в середине. Код, который я использую в настоящее время, приведен ниже: HTML-фрагмент кода:

<div class="accordion-content">
   <ul>
     <li class="current">
       <h3>Donec at neque eget lacus lobortis molestie</h3>
       <div class="content current">
           <p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
       </div>
     </li>
     <li class="">
       <h3>Phasellus felis purus, placerat vel augue vitae</h3>
       <div class="content" style="display: none;">
          <p>Nulla risus orci, viverra nec lacinia at, aliquam vel justo. Phasellus felis purus, placerat vel augue vitae, aliquam tincidunt dolor. Sed hendrerit diam in mattis mollis. Donec ut tincidunt magna. </p>
       </div>
     </li>
 </ul>
</div>

и вот код jquery:

$('.accordion-content ul li h3').click(function(){
    var parent = $(this).parent('li');
    if(parent.hasClass('current')){
        $(this).next('div').slideUp();
        parent.removeClass('current');
        //$(this).parent('li').children('.content').slideUp();
    }
    else
    {
        parent.siblings().children('div').stop(true,true).slideUp();
        parent.addClass('current');
        parent.siblings().removeClass('current');
        $(this).next('div').slideDown();
        $(this).parent('li').addClass('current');
        //$(this).parent('li').children('.content').slideDown();
    }
});

в то время как весь мой css показывает работу хорошо... проблема в том, что, как только я нажимаю h3, он показывает содержимое div, но как только я нажимаю другой h3 быстрее, чем старый div, он уничтожает весь процесс, и результаты не отображаются, поскольку я хочу... кто-нибудь подскажет мне, что делать сейчас или какой-нибудь более простой метод, чем это...? вот фрагмент кода css:

.accordion-content {
    li {
      margin-bottom: 10px;
      border: 1px solid #dedede;
      background: #ececec url("../images/plus-minus.png") no-repeat;
      background-position: 96% 45%;
      background-width: 8px;
      background-height: 10px ;
      &.current {
        background: #ececec url("../images/minus.png") no-repeat;
        background-position: 96% 11%;
      }
    }
    h3 {
      font-size: 16px;
      font-family: 'open sans', sans-serif;
      text-align: left;
      color: #2c2725;
      padding: 10px 0 10px 20px;
      &:hover {
        cursor: pointer;
      }
    }
    .content {
      width: 100%;
      background: #ffffff;
      padding: 10px 0 10px 0;
      text-align: center;
      display: none;
      text-align: left;
      padding: 15px;
      padding-bottom: 55px;
      p {
        font-size: 14px;
        line-height: 24px;
        color: #7f8281;
      }
    }
    .current {
      display: block;
    }
  }

С уважением

brian 19 фев. 2014, в 06:56

Источник

1

css не показывается ... вы также можете создать пример jfiddle: jsfiddle.net/gkQ3Y/1 из своего кода?
Vikram 19 фев. 2014, в 05:38
0

Фрагмент css хорошо показывает результаты, потому что единственный процесс с css - это то, что мы должны показать нашу работу. для вашего удобства я помещаю этот фрагмент кода в приведенный выше вопрос прямо сейчас.
brian 19 фев. 2014, в 05:41

Теги:

javascript

jquery

html

css

2 ответа

0

Вот вам может помочь.

Код jQuery

$('.accordion-content').find('h3').click(function(){
    $('.content').slideUp(); // Hide all content.
    $(this).next().slideDown(); // show current clicked heading detail
    $(this).parent().addClass('current').siblings('li').removeClass('current');  // add current class to current clicked heading and remove from another heading.
});

Демо-версия скрипта

Rakesh Kumar 19 фев. 2014, в 04:39

Ещё вопросы

css не показывается ... вы также можете создать пример jfiddle: jsfiddle.net/gkQ3Y/1 из своего кода?
Фрагмент css хорошо показывает результаты, потому что единственный процесс с css - это то, что мы должны показать нашу работу. для вашего удобства я помещаю этот фрагмент кода в приведенный выше вопрос прямо сейчас.

laraib · Accepted Answer · 2014-02-19T04-31-00.000Z

проблема не в том, что я упал, просто посмотрите на фрагмент кода в jsfidle http://jsfiddle.net/gkQ3Y/1/, и ваши результаты выглядят круто. что еще вы думаете, что хотите? единственное изменение, которое я чувствую, вы должны добавить

.stop(true,true)

чтобы ваша аккордеон загружалась должным образом, поскольку вы просто нажимаете на нее раньше, чем загружаются, и результаты выглядят иначе, чем вы ожидаете. так что ваш новый фрагмент кода будет выглядеть следующим образом:

 $('.accordion-wrapper .accordion-content ul li h3').click(function(){

    var parent = $(this).parent('li');
    if(parent.hasClass('current')){
        $(this).next('div').stop(true,true).slideUp();
        parent.removeClass('current');
        //$(this).parent('li').children('.content').slideUp();
    }
    else
    {
        parent.siblings().children('div').stop(true,true).slideUp();
        parent.addClass('current');
        parent.siblings().removeClass('current');
        $(this).next('div').stop(true,true).slideDown();
        $(this).parent('li').addClass('current');
        //$(this).parent('li').children('.content').slideDown();
    }
});

Я надеюсь, что сейчас все будет хорошо, и весь ваш код будет достаточным для выполнения этой работы, в то время как только эти две линии будут выполнять всю оставшуюся работу. С уважением