Question

我正在设置一个可重用的jQuery切换功能（对我的雇主来说）以启用内容的显示/隐藏（例如常见问题解答），以改善现有内联onClick绑定的可访问性。

在JSFiddle中，一切都快速而流畅，但是当我转移到预览服务器时，奇怪的行为变得明显。单击该按钮可正常工作，但在单击按钮的链接文本时，在发生任何事情之前会有明显的延迟。

脚本中是否有任何可能导致延迟的内容？或者任何明显的某种冲突候选人？

无论如何，这是代码（基于Mike Raynham's accessible toggles）：

http://jsfiddle.net/internet_man/9yKKM/2/

HTML：

<div class="buttons"> 
    <ul> 
        <li><strong class="_toggle type noscript">This is the first toggle</strong> 
            <ul class="_toggle-this show-hide"> 
                <li><a href="#"><strong>Option One</strong></a></li> 
                <li><a href="#"><strong>Option Two</strong></a></li> 
                <li><a href="#"><strong>Option Three</strong></a></li> 
            </ul> 
        </li> 
        <li class="bad-break"><strong class="_toggle type noscript">This is the second toggle (a bit longer than the first)</strong> 
            <ul class="_toggle-this show-hide"> 
                <li><a href="#"><strong>Option One</strong></a></li> 
                <li><a href="#"><strong>Option Two</strong></a></li> 
            </ul> 
        </li> 
        <li class="bad-break"><strong class="_toggle type noscript">This is the third toggle (also somewhat longer)</strong> 
            <ul class="_toggle-this show-hide"> 
                <li><a href="#"><strong>Option One</strong></a></li> 
                <li><a href="#"><strong>Option Two</strong></a></li> 
            </ul> 
        </li> 
    </ul> 
</div>

脚本：

var create_name = function(text) {
    var name = text.toLowerCase();
    name = name.replace(/^\s+|\s+jQuery|[^a-z0-9&\s-]/g, ''); 
    name = name.replace(/&/g, 'and'); 
    name = name.replace(/\s/g, '-'); 
    name = name.replace(/(-)+\1/g, "jQuery1"); 
    return name; 
}; 

var add_link = function() {
    var name = create_name(jQuery(this).text()); 
    jQuery(this).next('.toggle-this').attr('name', name); 
    jQuery(this).html('<a href="#' + name + '" title="Show content">' + jQuery(this).html() + '</a>'); 
}; 
var toggle = function(event) { 
    event.preventDefault(); 
    jQuery(this).toggleClass('expanded').nextAll('.toggle-this').slideToggle(100);
    jQuery('.toggle-this').not(jQuery(this).siblings()).slideUp(100);
    jQuery('.toggle').not(jQuery(this)).removeClass('expanded'); 
}; 

var remove_focus = function() { 
    jQuery(this).blur(); 
}; 

jQuery(function (){ 
    jQuery('._toggle').removeClass('_toggle, noscript').addClass('toggle'); 
    jQuery('._toggle-this').removeClass('_toggle-this').addClass('toggle-this');
    jQuery('._expanded').removeClass('_expanded').addClass('expanded'); 
    jQuery('.toggle:not(.expanded)').nextAll('.toggle-this').hide(); 
    jQuery('.toggle').each(add_link); 
    jQuery('.toggle').click(toggle); 
    jQuery('.toggle a').mouseup(remove_focus); 
});

CSS：

body
{
    font-size:62.5%;
    color:#666;
    font-family:arial,Helvetica,sans-serif;
}

a
{
    color:#462170;
}

ul
{
    list-style-type:none;
    margin-left:0;
    padding-left:0;
}

strong
{
    font-weight:normal;
}

div.buttons
{
    width:462px;
    line-height:2.2em;
    margin:1.5em 0;
}

.buttons li > strong
{
    font-size:1.9em;
}

.toggle, .buttons .type.noscript
{
    display:block;
    font-size:1.9em;
    height:65px;
    background:url(http://oi48.tinypic.com/dy6xf.jpg) 0 -85px no-repeat;
    padding:20px 0 0 90px;
    text-decoration:none;
    color:#462170;
    cursor:pointer;
    cursor:hand;
}

.toggle a
{
    text-decoration:none;
}

.toggle strong
{
    display:block;
    height:65px;
    border:1px dotted red;
}

.toggle:hover, .toggle:focus
{
    background-position:0 0;
}

.buttons .show-hide 
{
    border-bottom:6px solid white;
}

.buttons .show-hide li      
{
    margin-left:12px;
    border-bottom: 2px solid white;
    border-top:2px solid white;
    font-size:1em;
}

.buttons .show-hide a       
{
    display:block;
    height:15px;
    text-decoration:none;
    color:#462170;
    background:#f1f1f1 url(http://oi46.tinypic.com/6iedtw.jpg) 5px 14px no-repeat;
    padding:12px 0 15px 58px;
}

.buttons .show-hide a:hover, .connection-buttons .show-hide a:focus 
{
    text-decoration:underline;
    color:black;
    background-color:#ece8f0;
    background-position:5px -41px;
}

li.bad-break a
{
    padding-right:30%;
}

注意：

脚本 - ._toggle变为.toggle，._ togoggle-这变成.toggle-this，.noscript被删除，并且链接被插入（在这种情况下）类切换的强元素，指向下一个' .toggle-this'元素。

脚本关闭 - 没有创建切换，但它的样式就像手风琴被扩展一样。

可访问的jQuery切换奇怪的行为

0 个答案: