带有 ajax 加载的菜单无法正常工作

Menu with ajax load not working properly

本文关键字：常工作 工作 加载 ajax 菜单 带有      更新时间：2023-09-26

我创建了一个带有 ajax 加载的菜单。我有 4 个区域，每个区域都有状态。我想要的是将鼠标悬停在区域上，我需要显示该区域中的所有状态。我写以下代码

.HTML 

<ul class="zoneLevel">
    <li id="1" onmouseover="get_states_list(this.id);">East Zone
        <span id="stateContainer" style="display:none;">States</span>
    </li>
    <li id="2">West Zone</li>
    <li id="3">North Zone</li>
    <li id="4">South Zone</li>
</ul>

JAVASCRIPT

<script>
function get_states_list(zone_id) {
    //alert(zone_id);
    var last_slug_a1 = $(".homeLeftContainer .single:last").attr("id");  
    $('span#stateContainer').html('<img src="img/loader.gif">');
    $.post("modules/frontend/ajax/load_state.php?action=get&zone_id="+zone_id,
    function(data){
        if (data != "") {
            $("span#stateContainer").html(data);        
        } 
    });
    $(".stateContainer").css("display", "block");
    $(".stateHederMenu").css("display", "block");
}
</script>

一切都很好。

当我将鼠标悬停在状态（我使用 ajax 文件获得）时出现问题，它再次调用 get_states_list（this.id） 函数。 你能指出错误吗？

这是因为您再次悬停在 li 上，实际跨度在 li 内部，因此函数再次被触发。因此，只需在 li 之后使用另一个标签，可能是<a>,<p>,<span>或任何东西并关闭单词。因此，除非您将鼠标悬停在单词上，否则它不会再次触发。

<ul class="zoneLevel">
<li id="1" >
      <a onmouseover="get_states_list(this.id);">East Zone</a>
         <span id="stateContainer" style="display:none;">
            States
         </span>
 </li>
<li id="2">West Zone</li>
<li id="3">North Zone</li>
<li id="4">South Zone</li>
</ul>

jQuery 示例 

$('.zoneLevel li').one('mouseover',function (){
 get_states_list($(this).attr('id'));
})

并摆弄这种情况 小提琴

相关文章：