1

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

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

手风琴的屏幕截图

当用户点击 General 或 Contact 时，它应该展开各自的手风琴（这个功能很好）。当用户单击右侧的图像时，它应该加载帮助工具提示而不展开手风琴（这也很好，但是当用户单击帮助图像然后单击常规或联系人时，相应的手风琴将仅在两次单击后加载.) 我想让它一键加载。

这是我的 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()没有帮助解决我的问题。
有什么建议吗？

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

4

1 回答 1

1

如果我没看错，这就是正在发生的事情：

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

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

它将accordion_functions_active类添加到您的所有手风琴链接。

没有显示折叠内容的相应指令，因此内容和链接类不同步。IE。该类设置为活动，但内容仍处于隐藏状态。这就是为什么需要两次单击才能显示内容的原因。

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

所以要么把它改成

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

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

于 2013-07-10T12:11:44.467 回答