Создание Аккордеона вручную

Я попытался заново создать и меню стиля аккордеона вручную без использования библиотеки jQuery-UI. Все работает нормально, за исключением случаев, когда я нажимаю, чтобы открыть окно, которое открывается немедленно без какого-либо перехода. Я пытаюсь показать скрыть каждый квадрат, добавив класс, открытый. Я генерирую данные внутри каждого динамически, так что данные будут меняться каждый раз, а данные внутри каждого будут совершенно разными.Создание Аккордеона вручную

«Я НЕ ХОЧУ РЕШЕНИЕ ВКЛЮЧАЕТ гармошку» [извините за набрав в шапках :-)]

Я имею установку этого в jsFiddle. Может кто-то, пожалуйста, взгляните на это.

https://jsfiddle.net/2nfd9utt/

Для получения примера кода см. Ниже. Вот структура HTML, которую я использую.

<ul class="prfaccordion"> 
    <li> 
     <h3 class="prfaccDetailsHeader"> Committees </h3> 
     <div class="prfaccDetails"> 
     <ul> 
      <li> Sample Data 1 </li> 
      <li> Sample Data 2 </li> 
      <li> Sample Data 3 </li> 
     </ul> 
     </div> 
    </li> 
    <li> 
     <h3 class="prfaccDetailsHeader"> Contributions </h3> 
     <div class="prfaccDetails"> 
     <ul> 
      <li> Sample Data 1 </li> 
      <li> Sample Data 2 </li> 
      <li> Sample Data 3 </li> 
     </ul> 
     </div> 
    </li> 
    <li> 
     <h3 class="prfaccDetailsHeader"> Areas </h3> 
     <div class="prfaccDetails"> 
     <ul> 
      <li> Sample Data 1 </li> 
      <li> Sample Data 2 </li> 
      <li> Sample Data 3 </li> 
     </ul> 
     </div> 
    </li> 
</div>

Вот стиль,

.prfaccordion{ 
width: 150px; 
} 

.prfgrybox { 
    background: #eeeeee; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 10px; 
    margin: 0px 0px 10px 0px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    text-align: center; 
} 

ul.prfaccordion li { 
    list-style: none; 
    margin: 0px 0px 2px 0px; 
} 

    ul.prfaccordion li h3 { 
     background: #eeeeee url(images/downarr.png) no-repeat 95% 50%; 
     padding: 6px 10px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     border-radius: 6px; 
     -moz-border-radius: 6px; 
     -webkit-border-radius: 6px; 
     margin: 0px; 
     color: #3a4f60; 
     font-size: 15px; 
    } 

     ul.prfaccordion li h3.open { 
      background: #eeeeee url(images/uparr.png) no-repeat 95% 50%; 
      border-radius: 6px 6px 0px 0px; 
      -moz-border-radius: 6px 6px 0px 0px; 
      -webkit-border-radius: 6px 6px 0px 0px; 
     } 

    ul.prfaccordion li .prfaccDetails { 
     background: #fbfbfb; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
      font-size: 13px; 
     border-radius: 0px 0px 6px 6px; 
     -moz-border-radius: 0px 0px 6px 6px; 
     -webkit-border-radius: 0px 0px 6px 6px; 
     color: #5787ad; 
     display: none; 
      transition:all ease .5s; 
      -moz-transition:all ease .5s; 
      -webkit-transition:all ease .5s; 
    } 

     ul.prfaccordion li .prfaccDetails ul li { 
      padding: 5px 0px 5px 14px; 
      position: relative; 
      border-bottom: 1px solid #FFFFFF; 
     } 

      ul.prfaccordion li .prfaccDetails ul li a { 
       font-size: 13px !important; 
       color: #5787ad !important; 
      } 


      ul.prfaccordion li .prfaccDetails ul li:before { 
       position: absolute; 
       top: 9px; 
       left: 0px; 
       width: 8px; 
       height: 8px; 
       border-radius: 100%; 
       -moz-border-radius: 100%; 
       -webkit-border-radius: 100%; 
       content: ""; 
       background: #b1c7cc; 
      } 

     ul.prfaccordion li .prfaccDetails.open { 
      transition:all ease .5s; 
      -moz-transition:all ease .5s; 
      -webkit-transition:all ease .5s; 
      display: block; 
     } 
}

А вот сценарий,

$(document).ready(function() { 
      $(".prfaccDetailsHeader").click(function (event) { 

       if ($(this).hasClass("open")) { 
        $('.prfaccDetailsHeader').removeClass("open"); 
        $('.prfaccDetails').removeClass("open"); 
        return false; 
       } 

       $('.prfaccDetailsHeader').each(function (i, obj) { 
        $(this).removeClass('open'); 
       }); 

       $('.prfaccDetails').each(function (event) { 
        $(this).removeClass('open'); 
       }); 

       $(this).addClass("open"); 
       $(this).parent().find('.prfaccDetails').addClass("open"); 
      }); 
     });

источник

2015-11-17 locknies

Вы можете использовать jquerys toggle метод и передать в параметре медленной.

.toggle("slow");

Ваш код JQuery будет выглядеть следующим образом:

$(document).ready(function() { 
    $(".prfaccDetailsHeader").click(function (event) { 
     $('.prfaccDetailsHeader').each(function (i, obj) { 
      $(this).removeClass('open'); 
     }); 
     $('.prfaccDetails').each(function (event) { 
      $(this).removeClass('open'); 
     }); 
     $(this).parent().find('.prfaccDetails').toggle("slow"); 
    }); 
});

и вы можете удалить некоторые из ваших CSS. Такие, как переходы и тому подобное. Example Fiddle

Я включаю этот ответ, потому что OP явно не сказал, что хочет использовать переходы, только то, что он не хотел использовать jquery-ui.

источник

2015-11-17 12:47:52 Craicerjack

жаль могли бы вы уточнить? – locknies

Я думал, что OP не хочет JQuery – DonO

Он не хочет jquery-ui, но он явно использует jquery – Craicerjack

Вы не можете оживлять ни минуты с display: none;, так и display: block;. Вместо того, чтобы скрывать ваш элемент с помощью display: none, вы можете скрыть его, добавив max-height: 0px и overflow:hidden.

В фрагменте стиля для того, когда элемент открыт, вы вместо этого добавляете, например. max-height: 1000px; (максимальная высота должна быть абсолютная максимальная высота вашего элемент имеет права быть)

Примечания: Причина, я выбираю, чтобы оживить max-height вместо того, чтобы просто height потому, что CSS переходы не могут анимировать высоту, если это динамическое (т.е. высота установлена на авто или 100%). Это решается путем анимирования max-height элемента.

$(document).ready(function() { 
 
    $(".prfaccDetailsHeader").click(function(event) { 
 

 
    if ($(this).hasClass("open")) { 
 
     $('.prfaccDetailsHeader').removeClass("open"); 
 
     $('.prfaccDetails').removeClass("open"); 
 
     return false; 
 
    } 
 

 
    $('.prfaccDetailsHeader').each(function(i, obj) { 
 
     $(this).removeClass('open'); 
 
    }); 
 

 
    $('.prfaccDetails').each(function(event) { 
 
     $(this).removeClass('open'); 
 
    }); 
 

 
    $(this).addClass("open"); 
 
    $(this).parent().find('.prfaccDetails').addClass("open"); 
 
    }); 
 
});

.prfaccordion { 
 
    width: 150px; 
 
} 
 
.prfgrybox { 
 
    background: #eeeeee; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    padding: 10px; 
 
    margin: 0px 0px 10px 0px; 
 
    border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -webkit-border-radius: 10px; 
 
    text-align: center; 
 
} 
 
ul.prfaccordion li { 
 
    list-style: none; 
 
    margin: 0px 0px 2px 0px; 
 
} 
 
ul.prfaccordion li h3 { 
 
    background: #eeeeee url(images/downarr.png) no-repeat 95% 50%; 
 
    padding: 6px 10px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    border-radius: 6px; 
 
    -moz-border-radius: 6px; 
 
    -webkit-border-radius: 6px; 
 
    margin: 0px; 
 
    color: #3a4f60; 
 
    font-size: 15px; 
 
} 
 
ul.prfaccordion li h3.open { 
 
    background: #eeeeee url(images/uparr.png) no-repeat 95% 50%; 
 
    border-radius: 6px 6px 0px 0px; 
 
    -moz-border-radius: 6px 6px 0px 0px; 
 
    -webkit-border-radius: 6px 6px 0px 0px; 
 
} 
 
ul.prfaccordion li .prfaccDetails { 
 
    background: #fbfbfb; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    font-size: 13px; 
 
    border-radius: 0px 0px 6px 6px; 
 
    -moz-border-radius: 0px 0px 6px 6px; 
 
    -webkit-border-radius: 0px 0px 6px 6px; 
 
    color: #5787ad; 
 
    max-height: 0px; 
 
    overflow: hidden; 
 
    transition: all ease .5s; 
 
    -moz-transition: all ease .5s; 
 
    -webkit-transition: all ease .5s; 
 
} 
 
ul.prfaccordion li .prfaccDetails ul li { 
 
    padding: 5px 0px 5px 14px; 
 
    position: relative; 
 
    border-bottom: 1px solid #FFFFFF; 
 
} 
 
ul.prfaccordion li .prfaccDetails ul li a { 
 
    font-size: 13px !important; 
 
    color: #5787ad !important; 
 
} 
 
ul.prfaccordion li .prfaccDetails ul li:before { 
 
    position: absolute; 
 
    top: 9px; 
 
    left: 0px; 
 
    width: 8px; 
 
    height: 8px; 
 
    border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -webkit-border-radius: 100%; 
 
    content: ""; 
 
    background: #b1c7cc; 
 
} 
 
ul.prfaccordion li .prfaccDetails.open { 
 
    max-height: 100px; 
 
    transition: all ease .5s; 
 
    -moz-transition: all ease .5s; 
 
    -webkit-transition: all ease .5s; 
 
    display: block; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="prfaccordion"> 
 
    <li> 
 
    <h3 class="prfaccDetailsHeader"> Committees </h3> 
 
    <div class="prfaccDetails"> 
 
     <ul> 
 
     <li>Sample Data 1</li> 
 
     <li>Sample Data 2</li> 
 
     <li>Sample Data 3</li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h3 class="prfaccDetailsHeader"> Contributions </h3> 
 
    <div class="prfaccDetails"> 
 
     <ul> 
 
     <li>Sample Data 1</li> 
 
     <li>Sample Data 2</li> 
 
     <li>Sample Data 3</li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <h3 class="prfaccDetailsHeader"> Areas </h3> 
 
    <div class="prfaccDetails"> 
 
     <ul> 
 
     <li>Sample Data 1</li> 
 
     <li>Sample Data 2</li> 
 
     <li>Sample Data 3</li> 
 
     </ul> 
 
    </div> 
 
    </li> 
 
    </div>

источник

2015-11-17 12:54:19

Мой ответ похож на Натали. Тем не менее, я не мог заставить Натали работать с помощью «Run code snippet», поэтому я создал jsfiddle. Вы хотели, чтобы аккордеон скользил, поэтому вам нужно было установить высоту вместо блока отображения, а ни одного.

.prfaccordion{ 
width: 150px; 
} 

.prfgrybox { 
    background: #eeeeee; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 10px; 
    margin: 0px 0px 10px 0px; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    text-align: center; 
} 

ul.prfaccordion li { 
    list-style: none; 
    margin: 0px 0px 2px 0px; 
} 

    ul.prfaccordion li h3 { 
     background: #eeeeee url(images/downarr.png) no-repeat 95% 50%; 
     padding: 6px 10px; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     border-radius: 6px; 
     -moz-border-radius: 6px; 
     -webkit-border-radius: 6px; 
     margin: 0px; 
     color: #3a4f60; 
     font-size: 15px; 
    } 

     ul.prfaccordion li h3.open { 
      background: #eeeeee url(images/uparr.png) no-repeat 95% 50%; 
      border-radius: 6px 6px 0px 0px; 
      -moz-border-radius: 6px 6px 0px 0px; 
      -webkit-border-radius: 6px 6px 0px 0px; 
     } 

    ul.prfaccordion li .prfaccDetails { 
     background: #fbfbfb; 
     box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
      font-size: 13px; 
     border-radius: 0px 0px 6px 6px; 
     -moz-border-radius: 0px 0px 6px 6px; 
     -webkit-border-radius: 0px 0px 6px 6px; 
     color: #5787ad; 
     max-height:0; 
     overflow:hidden; 
      transition:all .5s ease; 
      -moz-transition:all .5s ease; 
      -webkit-transition:all .5s ease; 
    } 

     ul.prfaccordion li .prfaccDetails ul li { 
      padding: 5px 0px 5px 14px; 
      position: relative; 
      border-bottom: 1px solid #FFFFFF; 
     } 

      ul.prfaccordion li .prfaccDetails ul li a { 
       font-size: 13px !important; 
       color: #5787ad !important; 
      } 


      ul.prfaccordion li .prfaccDetails ul li:before { 
       position: absolute; 
       top: 9px; 
       left: 0px; 
       width: 8px; 
       height: 8px; 
       border-radius: 100%; 
       -moz-border-radius: 100%; 
       -webkit-border-radius: 100%; 
       content: ""; 
       background: #b1c7cc; 
      } 

     ul.prfaccordion li .prfaccDetails.open { 
      transition:all .5s ease; 
      -moz-transition:all .5s ease; 
      -webkit-transition:all .5s ease; 
      max-height:100px; 
     } 
}

(Я это написало, прежде чем я заметил ответ Натали, так что я думал, что я отправлю его anwyway)

источник

2015-11-17 13:03:08

Это работает! но я уже упомянул в своем вопросе, что данные, генерируемые в каждом окне, являются динамическими и меняются! – locknies

@KRIZTE вы можете увеличить максимальную высоту от 100px до 1000px; однако я заметил, что анимация работает не так хорошо. –

Вы можете передать этот простой код, чтобы сделать вашу работу.

$('.prfaccordion').find('h3').on('click',function(){  \t 
 
     var _target = $(this).parent().find('> div'); 
 
     if($(_target).is(':visible')){ 
 
      $(_target).slideUp(500); 
 
     } 
 
     else { 
 
      $(_target).slideDown(500); 
 
     } 
 
    });

.prfaccordion { 
 
    display: inline-block; 
 
    width: 40%; 
 
    list-style: none; 
 
} 
 
.prfaccordion li { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.prfaccordion li > h3 { 
 
    background: #eee; 
 
    display: inline-block; 
 
    width: 100%; 
 
    margin: 5px 0; 
 
    padding: 5px; 
 
} 
 
.prfaccordion li > div { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul class="prfaccordion"> 
 
    <li> 
 
     <h3> Committees </h3> 
 
     <div> 
 
     <ul> 
 
      <li> Sample Data 1 </li> 
 
      <li> Sample Data 2 </li> 
 
      <li> Sample Data 3 </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <h3> Committees 123 </h3> 
 
     <div> 
 
     <ul> 
 
      <li> Sample Data 1 </li> 
 
      <li> Sample Data 2 </li> 
 
      <li> Sample Data 3 </li> 
 
     </ul> 
 
     </div> 
 
    </li> 
 
</ul>

источник

2015-11-17 13:26:27

Создание Аккордеона вручную

ответ

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