如何缩短此 jQuery 代码？答案

【问题标题】：How can I shorten this jQuery code?如何缩短此 jQuery 代码？
【发布时间】：2017-05-25 23:20:25
【问题描述】：

我正在检查 jQuery ui，虽然代码可以按照我想要的方式运行，但我想知道它是否可以缩短。我试过自己做，但做不到。我将不胜感激。

如何缩短此代码？

JQUERY:

  $(function() {
      $("#accordion").accordion({
          collapsible: true,
          active: 'none'
      });
  });

  $(function() {
      var icons = {
          header: "ui-icon ui-icon-plus",
          activeHeader: "ui-icon ui-icon-minus"
      };
      $("#accordion").accordion({
          icons: icons
      });
      $("#toggle").button().on("click", function() {
          if ($("#accordion").accordion("option", "icons")) {
              $("#accordion").accordion("option", "icons", null);
          } else {
              $("#accordion").accordion("option", "icons", icons);
          }
      });
  });

  $("#tabs").tabs({
      disabled: [2, 3]
  });

  $("#tabs").tabs({
      hide: {
          effect: "drop",
          duration: 750
      }
  });

  $("#tabs").tabs({
      show: {
          effect: "drop",
          duration: 750
      }
  });

  $("#tabs").tabs({
      heightStyle: "auto"
  });

【问题讨论】：

能否添加html代码和代码的功能。有一个小提琴的例子很好
您只需将您的代码包装在一个$(function(){}); 中。所以有一件事。
当您为.tabs() 分配选项时，您使用的是相同的选择器，因此相同的元素，只需将它们合二为一即可。除非您打算制作 3 组不同的选项卡。

标签： jquery jquery-ui optimization

【解决方案1】：

这是我在 cmets 中建议的所有项目：

https://jsfiddle.net/Twisty/ywx0yrub/

JavaScript

$(function() {
  var icons = {
    header: "ui-icon ui-icon-plus",
    activeHeader: "ui-icon ui-icon-minus"
  };
  $("#accordion").accordion({
    collapsible: true,
    active: 'none',
    icons: icons
  });
  $("#toggle").button().click(function() {
    if ($("#accordion").accordion("option", "icons")) {
      $("#accordion").accordion("option", "icons", null);
    } else {
      $("#accordion").accordion("option", "icons", icons);
    }
  });
  $("#tabs").tabs({
    disabled: [2, 3],
    hide: {
      effect: "drop",
      duration: 750
    },
    show: {
      effect: "drop",
      duration: 750
    },
    heightStyle: "auto"
  });
});

将所有代码打包在一个中
在单个语句中定义初始化的所有部分
由于您的按钮是静态的，因此您不需要使用.on()。这没有错，但您可以通过使用.click() 来缩短它。

希望对您有所帮助。

【讨论】：

谢谢，这很有帮助