Question

我正在查看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"
  });

Answer 1

以下是我在评论中建议的所有项目：

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()。

希望有所帮助。

如何缩短这个jQuery代码？

1 个答案: