JQUERY两次点击问题

问题描述：

我目前有一些问题与我的菜单，其相当基本的要求。JQUERY两次点击问题

问题：

用户可以在菜单按钮一次点击，打开子菜单中，用户则下一步按钮打开该子菜单点击，这是重复按菜单选项的数目。一旦用户点击了它们，如果用户点击另一个菜单按钮一次，它将不会打开，如果用户第二次点击它将打开。因此，通过菜单运行一次后，只会响应两次用户点击，而不是一次。这个问题发生在其他领域。

我怀疑它的东西与我的点击处理程序和事件冒泡，但我JQuery的知识是自学的，所以我可以用两个指针做：

jQuery代码

$(document).ready(function(){ 
$('#menu span').hide(); 
$('#menu li').not('.sub_menu').toggle(function(){ 
    //$('#menu span').hide(); 
    $('.open').hide(); 
    //$(this).next().not('#mm_choice, .sub_menu').show(); 
    $(this).nextUntil('li').not('#mm_choice, .sub_menu').show().addClass('open'); 
    }, function(){ 
    //$(this).next().not('#mm_choice, .sub_menu').hide(); 
    //$(this).nextUntil('li').not('#mm_choice, .sub_menu').hide().removeClass('open'); 
    $('.open').removeClass('open').hide(); 
     }); 
});

HTML源代码

<div id="menu" title="Main Menu"> 
<ul id="m_choices" class="main_menu"> 

<li id="mm_choice" title="Customer Segmentation Menu">Customer Segmentation</li> 

    <span id="c_seg"><li class="sub_menu" title="Cust Seg Menu1">Cust Seg Menu1</li><li id="c_seg" class="sub_menu" title="Cust Seg Menu2">Cust Seg Menu2</li><li id="c_seg" class="sub_menu" title="Cust Seg Menu3">Cust Seg Menu3</li></span> 

<li id="mm_choice" title="Industry Menu">Industry Selection</li> 

    <span id="all_ind"><li class="sub_menu" title="View All Industries">View All</li></span> 

    <span id="spec_ind"><li class="sub_menu" title="View information on a specific Industry">View Specific Industry</li></span> 

<li id="mm_choice" title="Customer Satisfaction Menu">Customer Satisfaction</li> 

    <span id="all_cs"><li class="sub_menu" title="View every industry's CS survey results">View All</li></span> 

    <span id="spec_cs"><li class="sub_menu" title="View a specific industry's CS survey results">View Specific Industry</li></span> 

<li id="mm_choice" title="Performance Measures Menu">Performance Measures</li> 

    <span id="all_pm"><li class="sub_menu" title="Trend Menu">View All</li></span> 

    <span id="spec_pm"><li class="sub_menu" title="Trend Menu">View Specific Industry</li></span> 

<li id="mm_choice" title="Business Performance Menu">Business Performance</li> 

    <span id="all_bp"><li class="sub_menu" title="Bus Perf Menu">View All</li></span> 

    <span id="spec_bp"><li class="sub_menu" title="Bus Perf Menu">View Specific Industry</li></span> 

<li id="mm_choice" title="Trend Analysis Menu">Trend Analysis Menu</li> 

    <span id="all_trends"><li class="sub_menu" title="Trend Menu">View All</li></span> 

    <span id="spec_trends"><li class="sub_menu" title="Trend Menu">View Specific Industry Trends</li></span> 
</ul> 
</div>

的menu.php文件（H tml标记）导入（使用php include（）;）到index.php文件中。 JQuery文件在declerations.php中导入，导入到标题的index.php中。 Declerations.php包含所有必需的JQuery库。意图是在稍后阶段添加UI动画，以便详细阐述.show（）和.hide（）方法。

您可以将此内容发布到jsfiddle并共享链接？ – 2011-03-22 14:24:43

你还没有发布任何你的点击处理程序，这是问题可能出现的地方。 – psynnott 2011-12-19 15:10:50

切换功能将是点击处理程序，但正如我下面提到的也可能是原因 – vmex151 2011-12-19 15:14:25

答

而不是使用切换菜单，我会建议使用.click（）方法。点击可以让你更容易地控制发生的事情。 Toggle（）非常棒，当你想要点击两种不同的状态时，但对于复杂的菜单，它可能不是最好的方法。

此外，您还将自己的辅助导航包裹在span标记和list-items中的各个元素中。这是无效的HTML标记，并且会在某些浏览器中导致呈现问题。我会建议将这些跨度更改为ul的

JQUERY两次点击问题

相关推荐