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/

我的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; }

Answer 1

You have plenty of HTML errors in your page，我想至少有一个（或多个）影响你的脚本。无论如何，它应该以这种方式工作（你的PHP是有效的）：

Demo（注意：PHP标签已被删除）

＆＃13;

/* 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');
            }
        }
    }
}

＆＃13;

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

＆＃13;

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

＆＃13;

更新继续我们在以下评论中的讨论时，您遇到了问题，因为您每次循环运行时都会放置脚本，并且这样做了为什么剧本没有按预期工作。

按照以下说明操作：

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移动PHP，它就会被修复。

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

下拉列表不能使用id =＆＃34; <！ - ？php echo $ post ---> ID？＆gt;＆＃34;

1 个答案: