Question

我正在尝试创建一个滑动侧边栏，并想知道是否有更好的方式，然后我已经在做什么。

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

目前我只是检查sideSlideCount是否是偶数 - 如果侧边栏不能出来，那么当调用该函数时它会滑出;如果sideSlideCount是奇数（即％2！= 0），那么侧边栏应该滑出视野。

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

function slideSideBar() {
    if (sideSlideCount % 2 == 0) { // if sideSlideCount is even, i.e. the side bar is hidden
        $("#SideBar").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
    }
    else { // else, if the side bar is in view
        $("#SideBar").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
    }
    sideSlideCount++; // increment the variable
}

Answer 1

你没有说什么＆＃34;更好＆＃34;是的，但如果只是为了避免全局变量，你可以使用闭包：

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 在上述执行完成之前不会存在，因此请不要在之后调用它。

Answer 2

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

DEMO：http://jsfiddle.net/BzYuQ/

//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();
    });
});

显然，在这种情况下，SlidingSidebar组件做得不多，但随着应用程序的增长，模块化代码以摆脱$(function () {/*tons of code*/});反模式将在很多方面获得回报。 / p>

Answer 3

不确定你对“更好”的定义，但是我看到你使用的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
     });
}

信用：jQuery Animation Toggle。复制并粘贴：

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

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

增加JavaScript

3 个答案: