JavaScript中的增量

我试图创建一个滑动侧边栏，想知道是否有比我现在做的更好的方法

  <img id = "MenuIcon" src = "MenuIcon.png" alt = "Menu Icon" onclick = "slideSideBar()" />

---

不确定您对“更好”的定义，但我看到您使用jQuery，它有一个很好的$toggle特性，在这里可以有所帮助

function slidesideBar(){
     $("#SideBar").toggle(function() {
          $(this).animate({width: bodyWidth / 6}, 600); // slide the bar out to 300 width, 0.6 seconds
          $("#SideLinks").fadeTo(1000, 0.8); // fade the links into view, 1 second, to 100% opacity
     }, function() {
          $(this).fadeIn(300).animate({width: 0}, 600); // slide the bar back out of view (0 width), 0.6 seconds
          $("#SideLinks").fadeTo(200, 0); // fade the links out of view, 0.2 seconds, to 0% opacity
     });​
}

信用证：。复制和粘贴：

当给定一个函数列表作为参数时，.toggle（fn1，fn2）方法将在从第一个函数开始的给定函数之间交替使用。这会自动为您跟踪切换状态-您不必这样做

jQuery文档是。.toggle（）有多种形式，具体取决于所使用的参数，因此在搜索jQuery文档时，您并不总能找到正确的形式

您没有说“更好”是什么，但如果只是为了避免全局性，您可以使用闭包：

var slideSideBar = (function() {
  var sideSlideCount = false; // variable used with the side bar
  var bodyHeight = $(window).height();
  var bodyWidth = $(window).width();
  console.log(bodyWidth);

  // This function has access to all the above variables, but no other
  // function does.
  function slideSideBar() {
    if (sideSlideCount) {
        $("#SideBar").animate({width: bodyWidth / 6}, 600);
        $("#SideLinks").fadeTo(1000, 0.8);

    } else {
        $("#SideBar").fadeIn(300).animate({width: 0}, 600);
        $("#SideLinks").fadeTo(200, 0);
    }
    sideSlideCount = !sideSlideCount;
  }

  // Return a reference to the slideSideBar function so it's available
  // globally, but access to variables is "private"
  return slideSideBar;
}());

---

唯一的区别是，slideSideBar在执行上述操作之前不存在，因此在执行之后不要尝试调用它。

您可以简单地将代码模块化，以避免全局变量。您应该研究AMD模块，但是为了保持简单，您可以为自己创建一个名称空间，在其中保存代码

演示：

---

显然，在这种情况下，

SlidingSidebar

组件没有什么作用，但是随着应用程序的增长，模块化代码以避开

$（函数（）{/*吨代码*/}）反模式将在许多方面获得回报。
您可以交换块并使用
如果（sideSlideCount%2==0）
而不是
if（sideSlideCount%2）
。您还可以执行
if（sideSlideCount）
和以后的
sideSlideCount=++sideSlideCount%2
甚至
sideSlideCount=！sideSlideCount
@RobG我想我感兴趣的是一种避免全局变量sideSlideCount的方法；假设边栏有一个新闻部分，当你点击该部分时，它会显示更多的选项——这也需要一个全局变量来跟踪它是否打开。看起来我最终会得到大量的全局变量，我不希望这样。我可以只使用布尔值，但即使是布尔值也必须是布尔值。@connor0728它在实际滑动时定义了什么？什么叫
slideSideBar
？@plalx我有一个典型的3条菜单图标，单击该图标时，侧边栏会滑入/滑出。现在我已经在原始帖子中包含了代码。
var slideSideBar = (function() {
  var sideSlideCount = false; // variable used with the side bar
  var bodyHeight = $(window).height();
  var bodyWidth = $(window).width();
  console.log(bodyWidth);

  // This function has access to all the above variables, but no other
  // function does.
  function slideSideBar() {
    if (sideSlideCount) {
        $("#SideBar").animate({width: bodyWidth / 6}, 600);
        $("#SideLinks").fadeTo(1000, 0.8);

    } else {
        $("#SideBar").fadeIn(300).animate({width: 0}, 600);
        $("#SideLinks").fadeTo(200, 0);
    }
    sideSlideCount = !sideSlideCount;
  }

  // Return a reference to the slideSideBar function so it's available
  // globally, but access to variables is "private"
  return slideSideBar;
}());

//Define a SlidingSidebar reusable component
!function (ns, $) {

    function SlidingSidebar(el, animateDuration) {
        this.$el = $(el);
        this.animateDuration = animateDuration;
    }

    SlidingSidebar.prototype = {
        constructor: SlidingSidebar,

        toggle: function () {
            this.$el.stop().animate({ width: 'toggle' }, this.animateDuration);
        }
    };

    ns.SlidingSidebar = SlidingSidebar;

}(slideExampleSite = window.slideExampleSite || {}, jQuery);


$(function () {
    //The following behavior could also be in a configurable "SlidebarFeature" module
    //or you could integrate the button directly into the SlidingSidebar.
    //I'm just showing how code can be modularized here.
    var sideBar = new slideExampleSite.SlidingSidebar('#sidebar', 600);

    $('#toggle-btn').click(function () {
        sideBar.toggle();
    });
});