Javascript 下拉列表不使用id="&书信电报；？php echo$post->；ID？>&引用；

我的下拉菜单不工作，有人能发现问题并提出解决方案吗

<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>

，我猜其中至少有一个（或多个）会对您的脚本产生影响。无论如何，它应该是这样工作的（您的PHP是有效的）：

（注意：PHP标记已被删除）

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“”）.classList.toggle（“显示”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

div.dropdown-content:not（.show）{
显示：无；
}

下拉列表



单击
并创建一个没有PHPThanks for your help的测试页面，但是我已经更新了测试页面，它似乎不起作用。我需要在my Style.css文件中添加一些内容吗？如果您还没有设置样式，可以添加。在演示中看一看——只要元素没有
.show
类，我就在元素中添加了样式。查看演示时，不要忘记按“RunwithJS”，只需添加到样式表
div.dropdown-content:not（.show）{display:none；}
，正如您在演示中看到的那样-如果需要，添加
！重要信息
在“无”（它将强制属性影响元素）之后，您可以单击
并在此处发布可运行代码。我已将样式代码添加到my style.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; }