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中调用了click事件。请查看我的代码：

SELECT m.item_name, m.price, COUNT(od.qty) as qty, DATE_FORMAT(om.odate, '%Y') as date
FROM menu as m, order_detail as od, order_main as om
WHERE m.id = od.orderid AND DATE_FORMAT(om.odate, '%Y') = '2012'
GROUP BY m.item_name
ORDER BY qty ASC
LIMIT 7;

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(); }); 
	}

Answer 2

如果您了解jQuery Selector，可以使其变得更简单。

无需为每个项目定义ID。在这里，我更改了您的原始代码。

backup

$('.trigger').click(function() {
	$(this).parent().next('.menu-wrap').show();
});

$('.menu-wrap').mouseleave(function() {
	$(this).hide();
});

希望这可以为您提供帮助。

Answer 3

使用mouseover和mouseout并绑定这些功能。在mouseover之类的包装元素上使用td，以便mouseover和mouseout事件正常工作

单击的问题是，如果有人从不输入工具提示，则它将始终显示并且永远不会被隐藏，直到在工具提示上触发鼠标悬停事件为止。

$(document).ready(function() {
    $(".mypopup").mouseover(function() {
        $(this).find(".popupDiv").show();
    }).mouseout(function() {
        $(this).find(".popupDiv").hide();
    });
});

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

动态jQuery在mouseout上隐藏div

3 个答案: