JQuery выпадающий список работает, но не с другими списками

Question

Я работаю над пятью независимыми списками, я использую jquery, но работает только один список.Я прошу совета, потому что не могу понять, есть ли какие-то конфликты или код jquery неверен.Но я не вижу идентификатор в сценарии, только класс.Я использую flexbox, и я добавил скрипт на страницу (тема WordPress: customizr).В funtions.php есть включение Smart jquery.спасибо

<div class="cont">
<div class="elemento item33">
<section class="sectionlist">
<div class="contlist">
<div class="control">
   <span class="dropdown-trigger"><strong>Max</strong></span> </p>
<ul class="box dropdown-items">
<li class="dropdown-item">a</li>
<li class="dropdown-item">b</li>
<li class="dropdown-item">c</li>
</ul></div>
</div>
</section>
</div>
<div class="elemento item33">
<section class="sectionlist">
<div class="contlist">
<div class="control">
 <span class="dropdown-trigger">Robert</span> </p>
<ul class="box dropdown-items">
<li class="dropdown-item">1</li>
<li class="dropdown-item">d</li>
<li class="dropdown-item">e</li>
<li class="dropdown-item">f</li>
<li class="dropdown-item">g</li>
</ul></div>
</div>
</section>
</div>
<div class="elemento item33">
<section class="sectionlist">
<div class="contlist">
<div class="control">
 <span class="dropdown-trigger">Sam</span> </p>
<ul class="box dropdown-items">
<li class="dropdown-item">1</li>
<li class="dropdown-item">h</li>
<li class="dropdown-item">i</li>
<li class="dropdown-item">j</li>
<li class="dropdown-item">k</li>
</ul></div>
</div>
</section>
</div>
</div> <!--and 2 more list--->

<script>
var trigger = document.querySelector(".dropdown-trigger");
trigger.addEventListener("click", function(event) {
  document.querySelector(".dropdown-items").classList.toggle("is-open");
});
</script>

.sectionlist {text-align: center; width: 320px;}
.dropdown-trigger {color:#004a8f;padding:0;}
.dropdown-trigger:hover {cursor:pointer;}
.dropdown-trigger::after {content: "\25BD"; color:#ccc; 
padding-left:1em;}
.control {border: 1px solid #eee;}
.dropdown-items { display:none;
border-radius:1px;left:0;position:relative;top:0;z-index:1000;
text-align:left;line-height:1.5em;padding:0!important;  }
.dropdown-item {padding:.5em 2em;white-space:inherit;}
.dropdown-divider {border: 1px solid #eee;}
.dropdown-item:hover {background-color:#eee;}
.dropdown-items.is-open {display: block;width: inherit;}

Answer 1

Это мой подход к вашей проблеме

Кстати - вы говорите, что используете jquery, затем не пишете много кода, и для лучшего чтения вам следует правильно отформатировать код, чтобы он стал более читабельным для других.

Вот пример кода: https://jsfiddle.net/0rven7zt/3/

<style>
.sectionlist {text-align: center; width: 320px;}
.dropdown-trigger {color:#004a8f;padding:0;}
.dropdown-trigger:hover {cursor:pointer;}
.dropdown-trigger::after {content: "\25BD"; color:#ccc; 
padding-left:1em;}
.control {border: 1px solid #eee;}
.dropdown-items { display:none;
border-radius:1px;left:0;position:relative;top:0;z-index:1000;
text-align:left;line-height:1.5em;padding:0!important;  }
.dropdown-item {padding:.5em 2em;white-space:inherit;}
.dropdown-divider {border: 1px solid #eee;}
.dropdown-item:hover {background-color:#eee;}
.dropdown-items.is-open {display: block;width: inherit;}
</style>

<div class="cont">
    <div class="elemento item33">
        <section class="sectionlist">
            <div class="contlist">
                <div class="control">
                    <span class="dropdown-trigger"><strong>Max</strong></span>
                    <ul class="box dropdown-items">
                        <li class="dropdown-item">a</li>
                        <li class="dropdown-item">b</li>
                        <li class="dropdown-item">c</li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
    <div class="elemento item33">
        <section class="sectionlist">
            <div class="contlist">
                <div class="control">
                    <span class="dropdown-trigger">Robert</span>
                    <ul class="box dropdown-items">
                        <li class="dropdown-item">1</li>
                        <li class="dropdown-item">d</li>
                        <li class="dropdown-item">e</li>
                        <li class="dropdown-item">f</li>
                        <li class="dropdown-item">g</li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
    <div class="elemento item33">
        <section class="sectionlist">
            <div class="contlist">
                <div class="control">
                    <span class="dropdown-trigger">Sam</span>
                    <ul class="box dropdown-items">
                        <li class="dropdown-item">1</li>
                        <li class="dropdown-item">h</li>
                        <li class="dropdown-item">i</li>
                        <li class="dropdown-item">j</li>
                        <li class="dropdown-item">k</li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
$(function() {
    $('.dropdown-trigger').on('click', function() {
        $(this).next().toggle();
    });
});
</script>