Question

我更喜欢使用.slideToggle和3行代码，但不确定如何让脚本在滑动后自动“刷新”，并在它向后滑回时返回到原始状态（它不会滑回当我使用3行和.slideToggle时。对不起，技术说明不好。

$('#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; 
});

Answer 1

据我所知，试试这个：

$('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;
});

Answer 2

$('#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>'); 
      }
);

Answer 3

当您需要做的就是替换锚点内的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

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

3 个答案: