有没有更快捷的方式来编写这个简单的jQuery命令？

我更喜欢使用.slideToggle和3行代码，但不知道如何让脚本在滑动打开后“刷新”自身，并在滑回时返回原始状态（不滑回当我使用3行和一个.slideToggle）。对不好的技术解释抱歉。有没有更快捷的方式来编写这个简单的jQuery命令？

$('#showHide').hide(); 

$('a#slickShow').click(function() { 
    $('#showHide').show(400); 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>'); 

$('a#slickShow').click(function() { 
    $('#showHide').hide(400); 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>');

这是工作

$('#showHide').hide(); 

$('#slickShow').click(function(){ 

    $('#showHide').slideToggle(400, function() { 
     if ($('#showHide').is(':visible')){ 
      $('.archiveText2 a').html('View less Blog Entries<span class="archiveLink2">{</span>'); 

     } 
     else{ 
      $('.archiveText2 a').html('View more Blog Entries<span class="archiveLink2">}</span>'); 
     } 

    }); 

    return false; 
});

来源

2010-09-23 Dan

至于我能理解它的代码，最终得到了它，试试这个：

$('a#slickShow').click(function(){ 
    $('#showHide').slideToggle(400); 

    if ($('#showHide').is(':visible')){ 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>'); 
    } 
    else{ 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>'); 
    } 

    return false; 
});

来源

2010-09-23 17:20:25 Sarfraz

这不滑回再次，虽然，这是我当我试图一个if/else语句的麻烦，它滑下，完美替代文本，但随后的链接不会将它滑回去，它只会死掉 – Dan 2010-09-23 17:38:55

@Dan：添加'return false'行，查看我的更新回答。 – Sarfraz 2010-09-23 18:01:54

感谢您的帮助，但仍然不会滑动？ – Dan 2010-09-23 18:41:48

$('#showHide').hide(); 


$('a#slickShow').toggle(
     function(){ 
      $('#showHide').show(400); 
      $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>'); 
     }, 
     function(){ 
      $('#showHide').hide(400); 
      $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>'); 
     } 
);

来源

2010-09-23 17:21:38 trrrrrrm

看起来，你是当你需要做的是替换锚点内的html时，替换整个锚点。 .toggle（）可用于设置可用于交替点击的功能。您也可以从'a＃slickShow'选择器中删除'a'，因为ID查找本身会更快。

$("#slickshow").toggle(
    function() { 
    $(this).show(400).html("View less Blog Entries<span class="archiveLink2">{</span>"); 
    }, 
    function() { 
    $(this).hide(400).html("View more Blog Entries<span class="archiveLink2">}</span>"); 
    });

干杯， awirick

来源

2010-09-23 17:22:41

感谢您的帮助，我放弃了'a'。我现在可以看到我不需要替换整个锚点，但无法使'.html'工作？ – Dan 2010-09-23 23:05:47

现在就开始工作，非常感谢您的建议 – Dan 2010-09-24 19:47:09

有没有更快捷的方式来编写这个简单的jQuery命令？

回答

相关问题