防止一个函数中的单击事件影响另一个函数上的单击事件

Question

我正在实施手风琴的点击事件。手风琴有链接和帮助图像。当用户点击链接时，它应该仅扩展手风琴。当用户单击帮助图像时，它应显示工具提示帮助消息而不展开手风琴。

当我加载页面时，链接上的点击事件在第一次点击时效果很好。当我加载页面然后单击帮助图像时出现问题。它仅显示帮助消息而不展开手风琴，但现在当用户单击手风琴的标签以展开它时，除非用户点击，否则不会触发两次。

当用户点击“常规”或“联系人”时，它应该展开相应的手风琴（此功能很好）。当用户单击右侧的图像时，它应该在不扩展手风琴的情况下加载帮助工具提示（此功能也很好，但是当用户单击帮助图像然后单击“常规”或“联系人”时，相应的手风琴将仅在两次单击后加载。）我想在一次点击后加载它。

这是我的asp.net代码：

<ul>
<li id="function_contents_0" runat="server">
   <a href="javascript:;" id="function_0" class="accordion_functions_inactive" style="height:16px; width:95%;">
   <asp:Label ID="Label_Company_General" runat="server" Text="General" style="float: left;">
   </asp:Label>
   <span style="float: right; text-align: right; background-image:url('../assets/images/help.png'); width:16px; height:16px;" class="tooltip" title="This is help">
   </span>
   </a>
   <div class="function_contents" id="content_function_0">
   //some more code here
   </div>
</li>

<li id="function_contents_1" runat="server">
    <a href="javascript:;" id="function_1" class="accordion_functions_inactive" style="height:16px; width:95%;">
    <asp:Label ID="Label_Company_Contact" runat="server" Text="Contact" style="float: left;">
    </asp:Label> 
    <span style="float: right; text-align: right; background-image:url('../assets/images/help.png'); width:16px; height:16px;" class="tooltip" title="Am a second help">
    </span>               
    </a>
    <div class="function_contents" id="content_function_1">
    //some more code here
 </li>

 //The third accordion goes in here

</ul>

javascript代码：

//code for expanding accordions

 $("#accordion_functions a").on('click', function () {
    var this_prop = $(this).prop('class');
    var levels;

    if ($(this).attr('id') != undefined) {
        levels = $(this).attr('id').split('_')
    }

    if (this_prop == 'accordion_functions_active') {
        $('#content_function_' + levels[1]).hide();          
        $(this).prop('class', 'accordion_functions_inactive');
    }

    if (this_prop == 'accordion_functions_inactive') {
        $('#content_function_' + levels[1]).show();
        $(this).prop('class', 'accordion_functions_active');
    }

});

//code for showing the tooltip help message

$('#accordion_functions ul li a span:nth-child(2).tooltip').on('click', function () {
    var levels;
    var this_prop = $('#accordion_functions ul li a').prop('class');

    if ($('#accordion_functions ul li a').attr('id') != undefined) {
        levels = $('#accordion_functions ul li a').attr('id').split('_')
    }

    $('#content_function_' + levels[1]).hide();
    $('#accordion_functions ul li a').prop('class', 'accordion_functions_active');
    $('.accordion_functions_active').css('backgroundPosition', '5px -8px');

});

这是我的css：

.accordion_functions_inactive {
background-image: url(../images/arrows_white_blue.png);
background-repeat: no-repeat;
background-position: 5px -8px;
}
.accordion_functions_active {
background-image: url(../images/arrows_white_blue.png);
background-repeat: no-repeat;
background-position: 5px 9px;
}

我可能做错了什么？我的目标是当用户点击帮助消息图像并再次单击它关闭时，它不会影响手风琴点击（手风琴展开事件将在一次点击后触发但不会点击两次）。

我已阅读有关unbind()，return false，die()，preventDefault()和stopPropagation()的使用情况，但他们没有帮助解决我的问题。 />有什么建议吗？

编辑：添加了手风琴的屏幕截图和更多解释。

Answer 1

如果我正确地读到这个，那么这就是正在发生的事情：

当您单击帮助按钮时，它会执行以下行：

$('#accordion_functions ul li a').prop('class', 'accordion_functions_active');

将accordion_functions_active类添加到您的手风琴链接的全部。

没有相应的说明来显示手风琴内容，因此内容和链接类不同步。即。该类设置为活动，但内容仍然隐藏。这就是为什么需要两次点击才能显示内容。

第一次单击会根据活动类隐藏已隐藏的内容，并将类设置为非活动状态。现在，类和内容隐藏/显示状态已同步，并且在第二次单击时它将正常运行。

所以要么改成

$('#accordion_functions ul li a').prop('class', 'accordion_functions_inactive');
$('.function_contents').hide();

或者只是不要更改链接类或隐藏内容