Question

此jsfiddle中的侧边栏（来自http://jillix.github.io/jQuery-sidebar/）无法正常工作。应该是侧边栏的div只显示在页面上（默认情况下它应该被隐藏）。因此，侧边栏小部件似乎没有正确地连接到div，但是我已经检查过并且侧边栏出现在元素上，即$(".sidebar.right").sidebar().length = 1。＆＃39;关闭＆＃39;侧边栏的方法甚至被调用，但是代表侧边栏的div不是隐藏的。

在我的实际代码中，我使用的是Jquery 2.1.4

https://jsfiddle.net/qLcwjn4g/

＆＃13;

/*!
 *  jQuery sidebar plugin
 *  ---------------------
 *  A stupid simple sidebar jQuery plugin.
 *
 *  Developed with <3 and JavaScript by the jillix developers.
 *  Copyright (c) 2013-15 jillix
 * */
(function($) {

  /**
   * sidebar
   * Initialize sidebar on selected elements.
   *
   * ```js
   * $(".my-sidebar").sidebar({...});
   * ```
   *
   * After the call above, you can programatically open/close/toggle the sidebar using:
   *
   * ```js
   * $(".my-sidebar").trigger("sidebar:open");
   * $(".my-sidebar").trigger("sidebar:close");
   * $(".my-sidebar").trigger("sidebar:toggle");
   * $(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);
   * ```
   *
   * After the sidebar is opened/closed, `sidebar:opened`/`sidebar:closed` event is emitted.
   *
   * ```js
   * $(".my-sidebar").on("sidebar:opened", function () {
   *    // Do something on open
   * });
   *
   * $(".my-sidebar").on("sidebar:closed", function () {
   *    // Do something on close
   * });
   * ```
   *
   * @name sidebar
   * @function
   * @param {Object} options An object that will be merged with the default options.
   *
   *  - `speed` (Number): animation speed (default: `200`)
   *  - `side` (String): left|right|top|bottom (default: `"left"`)
   *  - `isClosed` (Boolean): A boolean value indicating if the sidebar is closed or not (default: `false`).
   *  - `close` (Boolean): If `true`, the sidebar will be closed by default.
   *
   * @return {jQuery} The jQuery elements that were selected.
   */
  $.fn.sidebar = function(options) {

    var self = this;
    if (self.length > 1) {
      return self.each(function() {
        $(this).sidebar(options);
      });
    }

    // Width, height
    var width = self.outerWidth();
    var height = self.outerHeight();

    // Defaults
    var settings = $.extend({

      // Animation speed
      speed: 200,

      // Side: left|right|top|bottom
      side: "left",

      // Is closed
      isClosed: false,

      // Should I close the sidebar?
      close: true

    }, options);

    /*!
     *  Opens the sidebar
     *  $([jQuery selector]).trigger("sidebar:open");
     * */
    self.on("sidebar:open", function(ev, data) {
      var properties = {};
      properties[settings.side] = 0;
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = false;
        self.trigger("sidebar:opened");
      });
    });


    /*!
     *  Closes the sidebar
     *  $("[jQuery selector]).trigger("sidebar:close");
     * */
    self.on("sidebar:close", function(ev, data) {
      var properties = {};
      if (settings.side === "left" || settings.side === "right") {
        properties[settings.side] = -self.outerWidth();
      } else {
        properties[settings.side] = -self.outerHeight();
      }
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = true;
        self.trigger("sidebar:closed");
      });
    });

    /*!
     *  Toggles the sidebar
     *  $("[jQuery selector]).trigger("sidebar:toggle");
     * */
    self.on("sidebar:toggle", function(ev, data) {
      if (settings.isClosed) {
        self.trigger("sidebar:open", [data]);
      } else {
        self.trigger("sidebar:close", [data]);
      }
    });

    function closeWithNoAnimation() {
      self.trigger("sidebar:close", [{
        speed: 0
      }]);
    }

    // Close the sidebar
    if (!settings.isClosed && settings.close) {
      closeWithNoAnimation();
    }

    $(window).on("resize", function() {
      if (!settings.isClosed) {
        return;
      }
      closeWithNoAnimation();
    });

    self.data("sidebar", settings);

    return self;
  };

  // Version
  $.fn.sidebar.version = "3.3.2";
})(jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>

  <div class="sidebar right">I am on right!</div>
  <script>
    $(function() {
      $(".sidebar.right").sidebar({
        side: "right"
      });
    });
  </script>
</body>

</html>

＆＃13;

我错过了什么？

Answer 1

侧边栏上缺少样式：

.sidebar{
position:fixed;
}

以下完整示例：

/*!
 *  jQuery sidebar plugin
 *  ---------------------
 *  A stupid simple sidebar jQuery plugin.
 *
 *  Developed with <3 and JavaScript by the jillix developers.
 *  Copyright (c) 2013-15 jillix
 * */
(function($) {

  /**
   * sidebar
   * Initialize sidebar on selected elements.
   *
   * ```js
   * $(".my-sidebar").sidebar({...});
   * ```
   *
   * After the call above, you can programatically open/close/toggle the sidebar using:
   *
   * ```js
   * $(".my-sidebar").trigger("sidebar:open");
   * $(".my-sidebar").trigger("sidebar:close");
   * $(".my-sidebar").trigger("sidebar:toggle");
   * $(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);
   * ```
   *
   * After the sidebar is opened/closed, `sidebar:opened`/`sidebar:closed` event is emitted.
   *
   * ```js
   * $(".my-sidebar").on("sidebar:opened", function () {
   *    // Do something on open
   * });
   *
   * $(".my-sidebar").on("sidebar:closed", function () {
   *    // Do something on close
   * });
   * ```
   *
   * @name sidebar
   * @function
   * @param {Object} options An object that will be merged with the default options.
   *
   *  - `speed` (Number): animation speed (default: `200`)
   *  - `side` (String): left|right|top|bottom (default: `"left"`)
   *  - `isClosed` (Boolean): A boolean value indicating if the sidebar is closed or not (default: `false`).
   *  - `close` (Boolean): If `true`, the sidebar will be closed by default.
   *
   * @return {jQuery} The jQuery elements that were selected.
   */
  $.fn.sidebar = function(options) {

    var self = this;
    if (self.length > 1) {
      return self.each(function() {
        $(this).sidebar(options);
      });
    }

    // Width, height
    var width = self.outerWidth();
    var height = self.outerHeight();

    // Defaults
    var settings = $.extend({

      // Animation speed
      speed: 200,

      // Side: left|right|top|bottom
      side: "left",

      // Is closed
      isClosed: false,

      // Should I close the sidebar?
      close: true

    }, options);

    /*!
     *  Opens the sidebar
     *  $([jQuery selector]).trigger("sidebar:open");
     * */
    self.on("sidebar:open", function(ev, data) {
      var properties = {};
      properties[settings.side] = 0;
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = false;
        self.trigger("sidebar:opened");
      });
    });


    /*!
     *  Closes the sidebar
     *  $("[jQuery selector]).trigger("sidebar:close");
     * */
    self.on("sidebar:close", function(ev, data) {
      var properties = {};
      if (settings.side === "left" || settings.side === "right") {
        properties[settings.side] = -self.outerWidth();
      } else {
        properties[settings.side] = -self.outerHeight();
      }
      settings.isClosed = null;
      self.stop().animate(properties, $.extend({}, settings, data).speed, function() {
        settings.isClosed = true;
        self.trigger("sidebar:closed");
      });
    });

    /*!
     *  Toggles the sidebar
     *  $("[jQuery selector]).trigger("sidebar:toggle");
     * */
    self.on("sidebar:toggle", function(ev, data) {
      if (settings.isClosed) {
        self.trigger("sidebar:open", [data]);
      } else {
        self.trigger("sidebar:close", [data]);
      }
    });

    function closeWithNoAnimation() {
      self.trigger("sidebar:close", [{
        speed: 0
      }]);
    }

    // Close the sidebar
    if (!settings.isClosed && settings.close) {
      closeWithNoAnimation();
    }

    $(window).on("resize", function() {
      if (!settings.isClosed) {
        return;
      }
      closeWithNoAnimation();
    });

    self.data("sidebar", settings);

    return self;
  };

  // Version
  $.fn.sidebar.version = "3.3.2";
})(jQuery);

.sidebar{
  position:fixed;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
<button type="button" class="open">
  open/close sidebar
</button>
  <div class="sidebar right">I am on right!</div>
  <script>
    $(function() {
      $(".sidebar.right").sidebar({
        side: "right"
      });
        $('.open').on('click', function() {
      $(".sidebar").trigger("sidebar:toggle");
    })
    });
  </script>
</body>

</html>

Answer 2

包括jquery
包括css
jsfiddle在window.onload中运行脚本，因此html中的js代码将在它之前运行。你应该推迟运行它。
```
setTimeout(function(){  
    $(".sidebar.right").sidebar({ side: "right" }).trigger("sidebar:open");  
},2000);
```

修正版：https://jsfiddle.net/qLcwjn4g/2/（setTimeout不是一个好方法，只是一个演示）

Answer 3

在github页面上的demo中，他们有一个demo所链接的handlers.js文件。这可以处理侧栏的启动和打开。您只需将其添加到您的页面或演示中即可。你还需要添加一点css。

以下是更新的演示JSFiddle

以下是handlers.js。只需将其放在sidebar.js文件之后

即可

$(document).ready(function () {
    // All sides
    var sides = ["left", "top", "right", "bottom"];

    // Initialize sidebars
    for (var i = 0; i < sides.length; ++i) {
        var cSide = sides[i];
        $(".sidebar." + cSide).sidebar({side: cSide});
    }

    // Click handlers
    $("button[data-action]").on("click", function () {
        var $this = $(this);
        var action = $this.attr("data-action");
        var side = $this.attr("data-side");
        $(".sidebar." + side).trigger("sidebar:" + action);
        return false;
    });
});

JQuery侧边栏不在这个jsfiddle中工作

3 个答案: