Question

我正在处理五个独立的列表，正在使用jquery，但是只有一个列表有效。我寻求建议，因为我无法理解是否存在一些冲突或jquery代码错误。但是我看不到脚本上的id，只有类。我正在使用flexbox，并在页面上添加了脚本（wordpress theme：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

这是我解决您问题的方法

btw-您说您正在使用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>

jQuery下拉列表有效，但没有更多列表

1 个答案: