html - javascript question concerning multiple customised dropdowns in same page - Stack Overflow

admin管理员组

文章数量:1122852

I'm using some jquery I found on CodePen for a customised dropdown menu. I want to use the same dropdown multiple times on one page. The original code is intended only for one dropdown on a page so it uses classes only.

I've modified the code so it uses ID's for each dropdown but using a foreach loop to open/close the dropdowns as I can't seem to use $this to properly target dropdown in use.

Problem with this is - it opens/closes all dropdowns instead of the just the one clicked on but its the only way i've managed to get it working.

Could anyone help with the coding of the open/close functions so that it uses $this rather than foreach loops and ID's?

Here's the link to the original PEN where you can see the script in action. Pen:

This is my modified working code: (NOT sure why but it won't work in the below preview!)

/* 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;
}

<script src=".7.1/jquery.min.js"></script>

<div style="display: flex;">
<div style="max-width:200px;">

<b>Collection 1</b>

</div>
<div class="collection-box" style="z-index:2; padding-left:10px;">

<select id="old-select1" class="old-select">

<option value="#">More Collections</option>

    <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="sass">SASS</option>
        <option value="javascript">Javascript</option>
        <option value="jquery" selected>jQuery</option>

</select>

<!-- New selection box -->

<div id="new-select1" class="new-select">
    <div class="selection">
        <p>
            <span></span>
        </p>
        <span></span>
    </div>
</div>

<!-- End -->

</div>
</div>


<div style="display: flex;">
<div style="max-width:200px;">

<b>Collection 2</b>

</div>
<div class="collection-box" style="z-index:2; padding-left:10px;">

<select id="old-select2" class="old-select">

<option value="#">More Collections</option>

    <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="sass">SASS</option>
        <option value="javascript">Javascript</option>
        <option value="jquery" selected>jQuery</option>

</select>

<!-- New selection box -->

<div id="new-select2" class="new-select">
    <div class="selection">
        <p>
            <span></span>
        </p>
        <span></span>
    </div>
</div>

<!-- End -->

</div>
</div>

本文标签： htmljavascript question concerning multiple customised dropdowns in same pageStack Overflow