Question

我创建了一个带有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）函数。你能指出错误。

Answer 1

这是因为你再次徘徊在li，实际的跨度在li里面，因此再次触发了该功能。所以只需使用另一个标签<a>,<p>,<span>或li之后的任何标签即可。所以它不会再触发，除非你把鼠标移到这个词上。

<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>

Answer 2

jQuery示例

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

为这种情况提供帮助fiddle

ajax加载菜单无法正常工作

2 个答案: