你只需要切换类来切换图标

$('#websites').click(function(){
   $('#webthumbs').slideToggle('fast');
   $('#websites span').toggleClass('icon-chevron-right icon-chevron-down');
});

代码不起作用的原因是，事件处理程序是在执行时添加到与选择器匹配的元素中，稍后添加类没有区别。

如果你需要切换jQuery没有提供内置方法的东西，你可以使用一个标志

$('#websites').click(function(){
    var flag = $(this).data('flag');
    if ( flag ) {
        // do anything when the state is "open"
        $('#webthumbs').slideUp('fast');
    } else {
        // do anything when the state is "closed"
        $('#webthumbs').slideDown('fast');        
    }
    $(this).data('flag', !flag);
});

使用委托

可以通过事件委派使用单独的基于状态的事件处理程序。不要将任一事件绑定到 #websites 元素，而是将事件处理程序绑定到最近的稳定父级(我在这里使用 'body'，但您可能希望使用不同的选择器(：

$('body').on('click', '#websites:not(.open)', function () {
  ...executed when not open...
}).on('click', '#websites.open', function () {
  ...executed when open...
});

委托语法将允许在 #websites.open 元素上调用单击回调，尽管它在绑定时不存在于 DOM 中。

当两种状态之间的行为明显不同时，此表单特别有用。

使用单个回调

如果你只是切换所有内容，我建议使用 jQuery 的切换函数并一次性完成所有操作：

$('#websites').on('click', function () {
  $(this)
    .slideToggle('fast')
    .toggleClass('open')
    .find('span')
      .toggleClass('icon-chevron-right icon-chevron-down');
});

如果在这两种状态之间具有单独的功能，则可以使用简单的if .is检查：

$('#websites').on('click', function () {
  if ($(this).is('.open')) {
    $(this)
      .removeClass('open')
      ...
  } else {
    $(this)
      .addClass('open')
      ...
  }
});

切换多个回调

您可以将回调公开为函数引用，并切换哪些回调在任何给定时间处于活动状态：

function openWebsites() {
  $(this)
    .off('click', openWebsites)
    .on('click', closeWebsites)
    .addClass('open')
    ...
}
function closeWebsites() {
  $(this)
    .off('click', closeWebsites)
    .on('click', openWebsites)
    .removeClass('open')
    ...
}
$('#websites').on('click', openWebsites);

呼应前面的答案，您可以将两个点击处理程序合并为一个：

$('#websites').click(function() {
    if ($(this).hasClass('open')) {
        $('#websites span')
            .removeClass('icon-chevron-down')
            .addClass('icon-chevron-right');
    } else {
        $('#webthumbs').slideToggle('fast');
        $('#websites span')
            .removeClass('icon-chevron-right')
            .addClass('icon-chevron-down');
    }
    $(this).toggleClass('open');
});

• 当您单击并且 open 类不是您单击的元素的一部分时，请执行某些操作。
• 如果单击并且 open 类是单击元素的一部分，请执行其他操作。

通过用文字表达，您可以看到相似之处：您的点击事件在两个行为中都是通用的，这只需要发生一次。在此点击事件中，您可以使用 jQuery 的 hasClass(( 函数来分离点击事件的目的。

我冒昧地通过对变量使用缓存来稍微优化您的代码。如果您在下面的评论中有任何疑问，请告诉我。

JQuery：

$(document).ready(function() {
  $('#websites').click(function() {
    var websites = $(this),
        webthumbs = $("#webthumbs"),
        websitesSpan = $("#websites span");
    webthumbs.slideToggle('fast');
    if (websites.hasClass("open")) {
      websitesSpan.removeClass('icon-chevron-down').addClass('icon-chevron-right');
      websites.removeClass('open');
    } else {
      websitesSpan.removeClass('icon-chevron-right').addClass('icon-chevron-down');
      websites.addClass('open');
    }
  });
});