jquery 下拉列表有效，但它没有更多列表

Question

我正在处理五个独立的列表，我使用的是 jquery，但只有一个列表有效。我寻求建议，因为我不明白是否存在一些冲突或 jquery 代码错误。但我没有在脚本上看到 id，只有类。 我正在使用 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>