我正在处理五个独立的列表,我正在使用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;}
这是我解决问题的方法
顺便说一句 - 你说你正在使用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>