0

我的名字是亚当，我是 Stack Exchange 的新手，但我发现这个网站对我过去遇到的许多问题非常有用。

我在使用 jquery 函数时遇到问题，并想在这里寻求建议。我对 html 和 css 有相当的了解，对 php 有一点了解，但几乎没有 javascript 或 jquery。

我目前正在开发一个使用特定 html 标签来启用动态内容的网站，因为不允许使用 php。然而，Javascript 是所以我一直在寻找它。我没有现场示例来向您展示，因为我只能在我的帐户中预览设计，但是我已经粘贴了下面的脚本。

我想创建一个响应式设计，流向移动设备。遵循最近的设计趋势，我想从屏幕的一侧创建“滑入/滑出”风格的菜单（想想 Facebook Mobile、Dolphin Browser）。在查看了一些示例后，我编写了一个更改 CSS 的函数，将主 div#site 模板向右移动，显示左侧菜单。一切都很好，而且效果很好。

今天我决定最好有两个滑出菜单，一个在左边，另一个在右边。

我在函数中添加了我认为会起作用的东西，它确实起作用了。

我有一个按钮（带有 .open-sidebar-right 类）将主站点（div#site）向左滑动，显示右侧菜单。然后我可以单击相同的按钮或 div#site 来关闭菜单。

当我单击左侧按钮时会出现问题。左侧菜单绝对完美地打开和关闭，但是它使右侧按钮完全无用并且根本不起作用。

我尝试将其编写为两个单独的函数，对具有不同值的两个菜单使用一个变量，并且在使用左键后它总是使右键无用。

正如我之前提到的，我几乎不了解 Javascript 或 jQuery，所以它的代码可能很糟糕，但我不明白为什么这不起作用。

如果有人有任何意见或建议，我将不胜感激。

在此先感谢，亚当。

jQuery(function () {
var sidebarleft;
var sidebarright;

// ------------
// Left sidebar

jQuery(".open-sidebar-left").click(function () {
    if (!sidebarleft) {
        jQuery("#site").css({
            'left':'50%',
        });
        sidebarleft = true;
        return false;
    } else {
        jQuery("#site").css({
            'left':'0%',
        });
        sidebarleft = false;
        return false;
    }
});

// ------------
// Right sidebar

jQuery(".open-sidebar-right").click(function () {
    if (!sidebarright) {
        jQuery("#site").css({
            'right':'50%',
        });
        sidebarright = true;
        return false;
    } else {
        jQuery("#site").css({
           'right':'0%',
        });
        sidebarright = false;
        return false;
    }
});

// ----------------------------------
// Close sidebars by clicking on site

jQuery("#site").click(function () {
    if (sidebarleft) {
        jQuery("#site").css({
            'left':'0%',
        });
        sidebarleft = false;
        return false;
    } else if (sidebarright) {
        jQuery("#site").css({
            'right':'0%',
        });
        sidebarright = false;
        return false;
    }
});
});
4

2 回答 2

2

亚当，

@zgood 说你的代码很好，但我想我会指出一些错误并提出一些可以解决你问题的建议：

$(document).ready(function(){ // in the jQuery doc, they don't suggest you use $(<func>)
    var sidebarleft = false, // sidebarleft and sidebarright has to be equal to something
    sidebarright = false; // either true or false (I would use false since you're testing false in your conditional

    $(".open-sidebar-left").click(function() {
        if( !sidebarleft ) {
             $("#site").css({
                 left: '50%' // remove the comma, and do not put quotes around single-word identifiers
             });
             sidebarleft = true; 
             return false;
        } else {
           $("#site").css({
              left: '0'
           });
           sidebarleft = false;
           return false;
        }
    });

    $(".open-sidebar-right").click(function() {
        if( !sidebarright ) {
             $("#site").css({
                 right: '50%' // remove the comma, and do not put quotes around single-word identifiers
             });
             sidebarright = true; 
             return false;
        } else {
           $("#site").css({
              right: '0'
           });
           sidebarright = false;
           return false;
        }
    });
});

正如您在上面代码中的注释中看到的那样，

  1. jQuery 说它是有效的，但不建议你使用jQuery(function(){});所以查询document元素然后测试准备好，然后调用函数
  2. sidebarright并且sidebarleft是undefined（既不是真也不是假）所以你的 if 语句没有意义。
  3. 在css()声明中，您不应该在最后一个元素上加逗号。仅当有多个元素时才使用逗号。

我还建议使用animate()而不是css()，并且（如果您使用 Chrome）使用检查器和（如果您使用 Firefox）使用 FireBug 来测试您的 javascript 代码中的任何错误。希望这可以帮助。

于 2013-02-21T20:15:23.710 回答
0

您的代码是正确的，问题似乎是 CSS 问题。

当您单击左键时，您的单击事件会向您的#site div 添加内联样式，如下所示：

<div id="site" style="left:50%;">

然后，当您单击右键时，您的代码会将新样式附加到您的#site div，如下所示：

<div id="site" style="left: 0%; right: 50%;">

看到问题了吗？

要解决此问题，您必须做两件事。由于您没有发布 CSS，我不知道您的样式是如何设置的，但请从您的样式声明#site中删除任何left或样式。right#site

接下来更新您的 jQuery 代码以删除任何以前的内联样式，如下所示：

 // ------------
// Left sidebar

jQuery(".open-sidebar-left").click(function () {
    jQuery("#site").removeAttr('style');
    if (!sidebarleft) {
        jQuery("#site").css({
            'left':'50%',
        });
        sidebarleft = true;
        return false;
    } else {
        jQuery("#site").css({
            'left':'0%',
        });
        sidebarleft = false;
        return false;
    }
});

和

jQuery(".open-sidebar-right").click(function () {
    jQuery("#site").removeAttr('style');
    if (!sidebarright) {
        jQuery("#site").css({
            'right':'50%',
        });
        sidebarright = true;
        return false;
    } else {
        jQuery("#site").css({
           'right':'0%',
        });
        sidebarright = false;
        return false;
    }
});

removeAttr是你的朋友吗？此外，您可能想要使用动画而不是仅仅更改 css 值，但那是您的电话

jQuery .animate()

于 2013-02-21T20:07:24.867 回答