下拉列表不使用 id= "<?php echo $post->ID ?>"

Question

我的下拉菜单不起作用，有人可以发现问题并提出修复建议吗？

<div><ul><li><p class="more-info">
<a onclick="myFunction()" class="dropbtn">Dropdown</a></ul></li>
<div id="<?php echo $post->ID ?>" class="dropdown-content">
<?php echo $dropdown ?>
</div>
</div>
<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("<?php echo $post->ID ?>").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</div>

我在这里得到了一个实时版本 - http://www.enjoycompare.com/test-2/

我的风格.css

.product-box .dropbtn{border:none;cursor:pointer;margin-bottom:5px;}
.product-box .dropdown{position:relative;display:inline-block;}
.product-box .dropdown-content{width:auto;position:relative;margin:0px 20px 0px 20px;}
.product-box .dropdown-content ul{overflow:hidden;margin-left:-18px;margin-bottom:20px;}
.product-box .dropdown-content ul li{width:675px;float:left;margin:0 0 0 18px;padding:2px 0 10px 27px;background:url(img/icons/tick-bullet.png) top left no-repeat;}
.product-box .dropdown-content a {font-family:'Nunito', sans-serif;font-weight:700;padding:10px;color:#222;text-decoration:none;}
.product-box div.dropdown-content:not(.show) { display: none!important; }

Answer 1

你的页面中有很多HTML错误，我想其中至少有一个(或多个)会影响你的脚本。无论如何，它应该以这种方式工作(您的 PHP 是有效的)：

演示(注意：PHP 标签已被删除)

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("<?php echo $post->ID; ?>").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

div.dropdown-content:not(.show) {
display: none;
}

<div>
<ul>
<li>
<p class="more-info">
<a onclick="myFunction()" class="dropbtn">
Dropdown
</a>
</p>
</li>
</ul>
<div id="<?php echo $post->ID; ?>" class="dropdown-content">
<?php echo $dropdown; ?>
</div>
</div>

更新在下面的评论中继续我们的讨论，您遇到了问题，因为每次循环运行时都放置了脚本，这就是脚本未按预期工作的原因。

请按照以下说明操作：

1)将script标签移出循环，到页面底部(就在正文结尾</body>之前)

2)不要使用预定义的值：这意味着，您有以下代码：

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("<?php echo $post->ID; ?>").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

如您所见，您已经定义了<?php echo $post->ID; ?>将生成所需的元素。如果它只是一个元素，它可能会很好。但是您正在处理多个元素，并且此值会覆盖所有其他可能的值。

3)所以相反，这样做：

<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction(dropdown_id) {
document.getElementById(dropdown_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

您可以专门为每次迭代修改(和重新修改)dropdown_id。我的意思是，您所要做的就是简单地更新您的 html 以：

<div>
<ul>
<li>
<p class="more-info">
<a onclick="myFunction('<?php echo $post->ID; ?>')" class="dropbtn">
Dropdown
</a>
</p>
</li>
</ul>
<div id="<?php echo $post->ID; ?>" class="dropdown-content">
<?php echo $dropdown; ?>
</div>
</div>

只需将PHP从JavaScript中移出，它就会被修复。

希望它有所帮助，如果出现问题，请告诉我(当然，如果它按预期工作)。