javascript - 鼠标移出时动态 jQuery 隐藏 div

Question

我正在尝试在使用 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>

Answer 1

因为你在标签的点击事件中添加了函数 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>