Вопрос по javascript, касающийся нескольких настраиваемых раскрывающихся списков на одной странице [закрыто] ⇐ CSS

[Anonymous]

Я использую jquery, найденный на CodePen, для создания настраиваемого раскрывающегося меню.Я хочу использовать один и тот же раскрывающийся список несколько раз на одной странице.
Исходный код предназначен только для одного раскрывающегося списка на страница, поэтому она использует только классы.
Я изменил код, чтобы он использовал идентификаторы для каждого раскрывающегося списка, но использовал цикл foreach для открытия/закрытия раскрывающихся списков, поскольку я не могу этого сделать используйте $this для правильного таргетинга используется раскрывающийся список.
Проблема в том, что он открывает/закрывает все раскрывающиеся списки, а не только тот, на который нажали, но это единственный способ заставить его работать.
Может ли кто-нибудь помочь с кодированием функций открытия/закрытия, чтобы он использовал $this вместо циклов foreach и идентификаторов?
Вот ссылка на оригинальный PEN, где вы можете увидеть сценарий в действие.
Перо: https://codepen.io/pierre-laurent/pen/LVLgVw
Это мой модифицированный рабочий код:
(НЕ знаю почему, но это не будет работать в предварительном просмотре ниже!)

Код: Выделить всё

/* Old-Select */

.old-select{
position: absolute;
top: -9999px;
left: -9999px;
}

/* New-Select */

.new-select{
width: 220px;
height: 30px;
margin: auto;

text-align: left;
color: #444;
line-height: 30px;
position: relative;
}

.new-select .selection:active{
transform:         rotateX(42deg);
-o-transform:      rotateX(42deg);
-ms-transform:     rotateX(42deg);
-moz-transform:    rotateX(42deg);
-webkit-transform: rotateX(42deg);
transform-style:         preserve-3d;
-o-transform-style:      preserve-3d;
-ms-transform-style:     preserve-3d;
-moz-transform-style:    preserve-3d;
-webkit-transform-style: preserve-3d;
transform-origin:         top;
-o-transform-origin:      top;
-ms-transform-origin:     top;
-moz-transform-origin:    top;
-webkit-transform-origin: top;
transition:         transform         200ms ease-in-out;
-o-transition:      -o-transform      200ms ease-in-out;
-ms-transition:     -ms-transform     200ms ease-in-out;
-moz-transition:    -moz-transform    200ms ease-in-out;
-webkit-transition: -webkit-transform 200ms ease-in-out;
}

.new-select .selection{
width: 100%;
height: 100%;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);

cursor: pointer;
position: relative;
z-index: 20; /* Doit être supérieur au nombre d'option */

transform:         rotateX(0deg);
-o-transform:      rotateX(0deg);
-ms-transform:     rotateX(0deg);
-moz-transform:    rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform-style:         preserve-3d;
-o-transform-style:      preserve-3d;
-ms-transform-style:     preserve-3d;
-moz-transform-style:    preserve-3d;
-webkit-transform-style: preserve-3d;
transform-origin:         top;
-o-transform-origin:      top;
-ms-transform-origin:     top;
-moz-transform-origin:    top;
-webkit-transform-origin: top;
transition:         transform         200ms ease-in-out;
-o-transition:      -o-transform      200ms ease-in-out;
-ms-transition:     -ms-transform     200ms ease-in-out;
-moz-transition:    -moz-transform    200ms ease-in-out;
-webkit-transition: -webkit-transform 200ms ease-in-out;
}

.new-select .selection p{
width: calc(100% - 10px);
position: relative;

margin-left: 10px;

transition:         all 200ms ease-in-out;
-o-transition:      all 200ms ease-in-out;
-ms-transition:     all 200ms ease-in-out;
-moz-transition:    all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
}

.new-select .selection:hover p, .new-select .selection.open p{
color: #bdc3c7;
}

.new-select .selection i{
display: block;
width: 1px;
height: 70%;
position: absolute;
right: -1px; top: 15%; bottom: 15%;
border: none;
background-color: #bbb;
}

.new-select .selection > span{
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 6px 0 6px;  /* Height: 14px / Width: 16px */
border-color: #bbb transparent transparent transparent;

position: absolute;
top: 10px; /* 50 / 2 - 14 / 2 */
right: 22px; /* 60 / 2 - 16 / 2 */
}

.new-select .selection.open > span{
width: 0;
height: 0;
border-style: solid;
border-width: 0 8px 10px 6px;
border-color: transparent transparent #bbb transparent;
}

.new-option{
text-align: left;
background-color: #fff;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
position: relative;
margin-top: 1px;

position: absolute;
left: 0; right: 0;

transition:         all 300ms ease-in-out;
-o-transition:      all 300ms ease-in-out;
-ms-transition:     all 300ms ease-in-out;
-moz-transition:    all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
}

.new-option p{
width: calc(100% - 10px);
margin-left: 10px;
}

.new-option.reveal:hover{
background-color: #444;
color: #f5f5f5;
}

Код: Выделить всё

Collection 1[/b][b]



More Collections

HTML
CSS
SASS
Javascript
jQuery





















Collection 2[/b]



More Collections

HTML
CSS
SASS
Javascript
jQuery

Подробнее здесь: https://stackoverflow.com/questions/793 ... -same-page