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

并命名为最适合你的人：）

Answer 2

假设标记由链接组成

<a class='menu' href='#' data-label='Menu'>Menu</a>
<ul class='items'>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<a href='#' data-label='Community'>Community</a>
<ul class='items'>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<a href='#' data-label='Quick Links'>Quick Links</a>
<ul class='items'>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

$('.items').hide();
$('.menu').click(function () {
   var $this = $(this);
   var label = $this.data('label');
   $this.text($this.text() == '+ ' + label ? '- ' + label: '+ ' + label);
   $this.next('ul:first').slideToggle('slow');
   return false;
});

通过使用嵌套的UL＆gt; LI样式

，您可以做得更好

Answer 3

我为您优化了完整的包....您可能会感兴趣。

检查此Jsfiddle链接

考虑HTML

<div divtotog="top_menu" class="tog" tex="Menu">+ Menu</div>
<div divtotog="commun_links" class="tog" tex="Community">+ Community</div>
<div divtotog="q_links" class="tog" tex="Quick Links">+ Quick Links</div>

<br>
<div id="top_menu" style="display:none;">top_menu</div>
<br>
<div id="commun_links" style="display:none;">commun_links</div>
<br>
<div id="q_links" style="display:none;">q_links</div>

<强> Jquery的

$('.tog').click(function () {
    var txt = $(this).attr("tex");
    $(this).text($(this).text() == '+ '+txt ? '- '+txt : '+ '+txt);
    $("#"+$(this).attr("divtotog")).slideToggle('slow').css({'display' : 'block'});
    return false;
});

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

3 个答案: