更好地编写/优化Jquery代码？

Question

我只是想知道,因为所有3对不同的id做同样的事情可以更好地编写/优化吗？

$('#top_menu,#commun_links,#q_links').hide();

$('#top_menu_toggle').click(function () {
   $(this).text($(this).text() == '+ Menu' ? '- Menu' : '+ Menu');
   $('#top_menu').slideToggle('slow').css({'display' : 'block'});
   return false;
});

$('#commun').click(function () {
   $(this).text($(this).text() == '+ Community' ? '- Community' : '+ Community');
   $('#commun_links').slideToggle('slow');
   return false;
});

$('#qnav').click(function () {
   $(this).text($(this).text() == '+ Quick Links' ? '- Quick Links' : '+ Quick Links');
   $('#q_links').slideToggle('slow');
   return false;
});

像往常一样,所有的帮助都表示赞赏并提前感谢.

Answer 1

只需创建一个绑定所有内容的函数,对其进行参数化,以便您可以传递到想要监听点击的位置,要滑动的元素以及要在按钮上设置的标签.

function bindClick(click_tgt, rel_el, label) {

   $(click_tgt).click(function () {
      $(this).text($(this).text() == '+ ' + label ? '- ' + label : '+ ' + label);
      $(rel_el).slideToggle('slow').css({'display' : 'block'});
      return false;
   });
}

$('#top_menu,#commun_links,#q_links').hide();

bindClick('#top_menu_toggle', '#top_menu', 'Menu');
bindClick('#commun', '#commun_links', 'Community');
bindClick('#qnav', '#q_links', 'Quick Links');

并命名它最适合你:)