JQUERY 两次点击问题答案

【问题标题】：JQUERY Two Clicks IssueJQUERY 两次点击问题
【发布时间】：2011-03-22 14:18:25
【问题描述】：

我的菜单目前有一些问题，根据要求，它非常基本。

问题：

用户可以单击菜单按钮一次并打开子菜单，然后用户单击打开该子菜单的下一个按钮，根据菜单选项的数量重复此操作。一旦用户单击了它们，如果用户单击另一个菜单按钮一次，它将不会打开，如果用户再次单击它将打开。因此，在菜单运行一次后，只会响应两次用户点击，而不是一次。其他地区也出现此问题。

我怀疑这与我的点击处理程序和事件冒泡有关，但我的 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 文件（html 标记）被导入（使用 php include();）到 index.php 文件中。 JQuery 文件在 declerations.php 中导入，在 header 中导入 index.php。 Declerations.php 包含所有必要的 JQuery 库。意图是在稍后阶段添加 UI 动画，以便详细说明 .show() 和 .hide() 方法。

【问题讨论】：

你能把这个发布到 jsfiddle 并分享链接吗？
您尚未发布任何点击处理程序，这可能是问题所在。
切换功能将是点击处理程序，但正如我在下面提到的，也可能是原因

标签： jquery-ui jquery-selectors jquery

【解决方案1】：

我建议使用 .click() 方法，而不是使用切换菜单。单击将使您更容易控制发生的事情。 Toggle() 非常适合您希望在单击时具有两种不同的状态，但对于复杂的菜单，它可能不是最好的方法。

您还将辅助导航包装在跨度标签和列表项中的各个元素中。这是无效的 HTML 标记，会在某些浏览器中导致呈现问题。我建议将这些跨度更改为 ul 的

【讨论】：