Доброй день.
Есть код аккордеона:
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {
el: this.el,
multiple: this.multiple
}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
});
ul {
list-style-type: none;
}
a {
color: black;
text-decoration: none;
}
/** =======================
* Contenedor Principal
===========================*/
.accordion {
background: #f9fBfC;
min-height: 272px;
margin-top: 31px;
width: 215px;
margin-left: -15px;
}
.accordion .link {
max-height: 390px;
cursor: pointer;
display: block;
margin-top: -18px;
padding: 28px 12px 9px;
color: #4D4D4D;
font-size: 14px;
font-weight: 800;
border-bottom: 4px solid #b9b9e5;
position: relative;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.accordion li:last-child .link {
border-bottom: 10;
}
.accordion li i {
position: absolute;
top: 1px;
left: -12px;
font-size: 10px;
color: black;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.accordion li i.fa-chevron-down {
right: 12px;
left: auto;
font-size: 12px;
}
.accordion li.open .link {
color: #352a00;
}
.accordion li.open i {
color: #f2f2f2;
}
.accordion li.open i.fa-chevron-down {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
max-height: 290px;
}
.accordion li.default .submenu {
display: block;
}
/**
* Submenu
-----------------------------*/
.submenu {
max-height: 290px;
display: none;
background: ;
font-size: 13px;
}
.submenu li {
border-bottom: 2px solid black;
}
.submenu a {
max-height: 290px;
display: block;
text-decoration: none;
color: #010523; //цвет текста
font-family: bold;
padding-top: 4px;
padding-left: 62px;
-webkit-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submenu a:hover {
background: #75788c;
color: #FFF;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion" class="accordion">
<li>
<div class="link"><i class="fa fa-paint-brush"></i>Trust rating<i class="fa fa-chevron-down"></i></div>
<ul class="submenu tab-content" id="Trust_rating">
<li><a data-toggle="tab" href="#Raise_rating" href="#">Raise rating</a></li>
<li><a data-toggle="tab" href="#Talk_about_you" href="#">Talk about you</a></li>
<li><a data-toggle="tab" href="#Offers_to_join" href="#">Offers to join</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-code"></i>Activity<i class="fa fa-chevron-down"></i></div>
<ul class="submenu tab-content">
<li id="main_list_item"><a data-toggle="tab" href="#All1" href="#">All</a></li>
<li id="main_list_item"><a data-toggle="tab" href="#Contacts1" href="#">Contacts</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-mobile"></i>Result<i class="fa fa-chevron-down"></i></div>
<ul class="submenu tab-content">
<li id="main_list_item"><a data-toggle="tab" href="#All2" href="#">All</a></li>
<li id="main_list_item"><a data-toggle="tab" href="#Contacts2" href="#">Contacts</a></li>
</ul>
</li>
<li>
<div class="link"><i class="fa fa-globe"></i>Social networks<i class="fa fa-chevron-down"></i></div>
<ul class="submenu tab-content">
<li id="main_list_item"><a data-toggle="tab" href="Name_sotial_network" href="#"> Name sotial network</a></li>
<li id="main_list_item"><a data-toggle="tab" href="Name_sotial_network" href="#"> Name sotial network</a></li>
<li id="main_list_item"><a data-toggle="tab" href="Name_sotial_network" href="#"> Name sotial network</a></li>
</ul>
</li>
</ul>
Я сделал 2-ой такой же Accordion с теми же свойствами, но он не работает (не раскрывается). Видимо дело все в JavaScript. Подскажите пожалуйста, что не так?
Пояснения работы кода - Как звучит данный сценарий аккордеона?
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Взял пример код со страницы https://githubcom/pagekit/vue-resource и попытался применить https://jsfiddle
Создал слайдер на бутстрапе, но есть такой минус, когда курсор находится в контейнере, то слайдер перестает автоматически менять изображения,...