javascript - 下拉按钮只能使用一次

Question

我试图在 HTML 表格中放置一个按钮，该按钮在单击时显示下拉菜单，并在单击或用户单击菜单外部时关闭。它只工作一次，然后按钮似乎完全停止工作。控制台上没有任何错误可以指导我朝着正确的方向前进。代码:HTML:

<tr>
    <td><?php echo $row['first_name']; ?></td>
    <td><?php echo $row['last_name']; ?></td>
    <td><?php echo $row['u_email']; ?></td>
    <td><?php echo $row['partynumber']; ?></td>
    <td><?php echo $time; ?></td>
    <td class="dropcontainer"><button class="ellipsis" class="dropbtn" onclick="toggleDrop();">. . .</button>
        <div id="resDrop" class="dropdown-content">
            <a href="#">Seated</a>
            <a href="#">Cancelled</a>
            <a href="#">No Show</a>
            <?php if($row['notes'] != ""){ ?>
            <a href="#">Notes</a>
            <?php } ?>
        </div>
    </td>
</tr>

Javascript:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function toggleDrop() {
  if (document.getElementById("resDrop").style.display != "block"){
    document.getElementById("resDrop").style.display = "block";
    document.getElementById("maindiv").innerHTML = document.getElementById("CurrentRes").innerHTML;
  }else{
    document.getElementById("resDrop").style.display = "none";
    document.getElementById("maindiv").innerHTML = document.getElementById("CurrentRes").innerHTML;
  }
}

$('html').click(function() {
   $('.dropdown-content').hide();
});

$('.dropcontainer').click(function(event){
  event.stopPropagation();
});

CSS:

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

Answer 1

第一次加载页面时，您可以通过其 ID 访问 resDrop 元素。在那之后，我怀疑您正在动态地重新创建您的内容，这就是导致您出现问题的原因(尽管您的代码还不足以 100% 确定您正在做的事情......)

对于动态创建的元素，您需要做的是将它们的操作与非动态父元素相关联。

例如

 <button class="ellipsis" class="dropbtn" id="toggle-button" >. . .</button>

$(document).on("click", "#toggle-button", function () { 
    if($("#resDrop").css( "display" ) !== 'block') {
        $("#resDrop").css( "display", 'block' );
    } else {
        $("#resDrop").css( "display", 'none' );
    }

    $("#maindiv").html($("#CurrentRes").html());
})

在上面的例子中，我给了你的切换按钮一个 id，然后我将它的事件处理程序附加到 document 所以如果你动态地重新创建按钮，它应该仍然工作。

我已经使用 jquery 重写了你的切换函数。