javascript - 动态jQuery在mouseout上隐藏div

我试图在使用PHP生成的动态表上生成工具提示样式的弹出菜单。该表在表中返回10至20行。当我单击第一列表中的项目时，我希望弹出子菜单以工具提示的样式显示。

我已经在设计样式以使其看起来像我想要的样子，但是现在我正在尝试使功能正常工作！

我设法拼凑了显示和隐藏div的代码，它对于一项很有效。但是，当我在测试中添加多于一行时，就会出现故障。我使用.click事件，但是由于有多个项目，您最终不得不双击。谁能帮助我让它更好地工作？

 function myPopup(id) {
    $("#myPopup" + id).click(function() {
        if ($("#menudiv" + id).is(":hidden")) {
            //$("#menudiv"+id).fadeIn(500);
            $("#menudiv" + id).show();
        } else {
            $("#menudiv" + id).hide();
        }
    });
    $("#menudiv" + id).mouseleave(function() {
        $(this).hide();
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tr>
            <td>
                <div style="padding-bottom:8px;">
                    <a href="#" id="myPopup1" onClick="javascript:myPopup(1);">Company Name</a>
                </div>
                <div id="menudiv1" style="position: fixed; display: none;">
                    <div class="tooltipMenu">
                        <span class="tooltiptext">View | Edit </span>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div style="padding-bottom:8px;">
                    <a href="#" id="myPopup2" onClick="javascript:myPopup(2);">Company Name</a>
                </div>
                <div id="menudiv2" style="position: fixed; display: none;">
                    <div class="tooltipMenu">
                        <span class="tooltiptext">View | Edit </span>
                    </div>
                </div>
            </td>
        </tr>

    </table>

最佳答案

因为您在标签的事件单击中添加了函数myPopup，但是您在函数myPopup中调用了单击事件。请查看我的代码：

function myPopup(id){
		if ($("#menudiv"+id).is(":hidden")) {
			$("#menudiv"+id).fadeIn(500);
			$("#menudiv"+id).show();
		} else {
			$("#menudiv"+id).hide();
		} ;

		$("#menudiv"+id).mouseleave(function(){ $(this).hide(); });
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
    <td>
    <div style="padding-bottom:8px;">
    <a href="#" id="myPopup1" onClick="javascript:myPopup(1);">Company Name</a>
    </div>
    <div id="menudiv1" style="position: fixed; display: none;">
        <div class="tooltipMenu">
            <span class="tooltiptext">View | Edit </span>
        </div>
    </div>
    </td>
</tr>
<tr>
    <td>
    <div style="padding-bottom:8px;">
    <a href="#" id="myPopup2" onClick="javascript:myPopup(2);">Company Name</a>
    </div>
    <div id="menudiv2" style="position: fixed; display: none;">
        <div class="tooltipMenu">
            <span class="tooltiptext">View | Edit </span>
        </div>
    </div>
    </td>
</tr>