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

我正在为我的雇主设置一个可重用的jQuery切换函数，以启用内容的显示/隐藏（例如FAQ），从而提高现有内联onClick绑定的可访问性

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

脚本中是否有可能导致延迟的内容？或者任何明显可能引发某种冲突的事情

无论如何，下面是代码（基于）：

html:

注:

脚本在--.\u toggle变为.toggle，.\u toggle-这变为.toggle this，.noscript被删除，并在类toggle的强元素周围（在本例中）插入一个链接，指向下一个“.toggle this”元素

---

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

它是否都包含在一个函数中，这样您就不会在全局名称空间中出现诸如

add\u link

，

toggle

之类的混乱情况？此外，如果它能够很好地独立工作，那么它不太可能出现在这个脚本中。它现在是：），但不幸的是仍然显示出同样的怪癖。关于第二点，我想知道在live server上是否一切都运行得比较慢（出于某种原因），因此出现了一个在更快的服务器上并不明显的问题。只需关闭这个问题——在传输到live时，一切都正常工作，没有奇怪的bug迹象。再次感谢你的帮助。

<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); 
});

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%;
}