jquery - 为什么我的 css 类从未执行过？-6ren

jquery - 为什么我的 css 类从未执行过？

转载作者：太空宇宙更新时间：2023-11-04 08:02:50

24

4

我正在努力做到当我点击一个按钮时，侧边栏 div 会向左移动。所以我的计划是:我添加了一个按钮，创建了一个 var 来控制 #sidebar 和 #wrapper div，添加了一个 toggleClass，然后该类会将 #sidebar div 移动到负值(并因此将其移出页面)。

这是js:

(function () {
    var $sidebarAndWrapper = $("#sidebar,#wrapper");
    $("#sidebarToggle").on("click", function () {
        $sidebarAndWrapper.toggleClass("hide-sidebar");
        if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
            $(this).text("Show Sidebar");
        } else {
            $(this).text("Hide Sidebar");
        }
    });

})();

这是CSS:

body {
    font-family: sans-serif;
    font-size: 15px;
    margin: 0;
}

label {
    font-weight: bold;
    display: block;
}

input[type=text], input[type=password], textarea {
    width: 175px;
}

#main {
    background-color: #e9e9e9;
    padding: 4px;
    margin: 0;
}

#footer {
    background-color: #222;
    color: #eee;
    padding: 8px 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.headshot {
    max-width: 50px;
    border: 1px solid #ff0000;
    padding: 3px;
}

.menu {
    font-size:12px;
}

    .menu li {
        list-style-type:none;
    }

    .menu li.active {
        font-weight: bold;
    }

#sidebar {
    background: #2A2C34;
    color: #eee;
    /*position: fixed;*/
    height: 100%;
    width: 250px;
    overflow: hidden;
    left: 0;
    margin: 0;
}

    #sidebar.hide-sidebar {
        left: -250px;
        background-color: #a3bfff;
    }

#wrapper {
    margin: 0 0 0 250px;
}

    #wrapper.hide-sidebar {
        margin-left: 250px;
    }

这是 html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>The World</title>

  <link rel="stylesheet" href="css/site.css"/>
</head>

<body style="font-family: sans-serif; font-size: 15px">

  <div id="sidebar">
    <img src="img/user.jpg" alt="Random guy" class="headshot"/>
    <span id="username">Random Name</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <div id="wrapper">
    <div id="main">
      <div>
        <button id="sidebarToggle">Hide Sidebar</button>
      </div>
      <h2>The World - from .NET Core 2.0</h2>

      <form>
        <div>
          <label>Date</label>
          <input />
        </div>
        <div>
          <label>Location</label>
          <input />
        </div>
        <div><input type="submit" value="Add" /></div>
      </form>
    </div>

    <div id="footer">
      &copy; 2017 Farid Ahamat
    </div>
  </div>
  <script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
  <script type="text/javascript" src="js/site.js"></script>
</body>
</html>

那么，为什么单击按钮时侧边栏 div 没有向左移动，或者其背景颜色发生变化？不过，每当我点击按钮时，我都可以看到文本发生了变化。

注意:我是通过学习 Pluralsight 类(class)来做到这一点的，所以如果可能的话，尽量坚持这里的做法(可能有更好但完全不同的方式)。

最佳答案

我只是评论 css position: fixed; 及其工作

var $sidebarAndWrapper = $("#sidebar,#wrapper");
//console.log($sidebarAndWrapper);
$("#sidebarToggle").on("click", function () {
    $sidebarAndWrapper.toggleClass("hide-sidebar");
    if ($sidebarAndWrapper.hasClass("hide-sidebar")) {
        $(this).text("Show Sidebar");
    } else {
        $(this).text("Hide Sidebar");
    }
});

body {
    font-family: sans-serif;
    font-size: 15px;
    margin: 0;
}

label {
    font-weight: bold;
    display: block;
}

input[type=text], input[type=password], textarea {
    width: 175px;
}

#main {
    background-color: #e9e9e9;
    padding: 4px;
    margin: 0;
}

#footer {
    background-color: #222;
    color: #eee;
    padding: 8px 5px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.headshot {
    max-width: 50px;
    border: 1px solid #ff0000;
    padding: 3px;
}

.menu {
    font-size:12px;
}

    .menu li {
        list-style-type:none;
    }

    .menu li.active {
        font-weight: bold;
    }

#wrapper.hide-sidebar {
    margin: 0 0 0 250px;
    transition:0.5s;
}

#sidebar {
    background: #2A2C34;
    color: #eee;
    /*position: relative;*/
    height: 100%;
    width: 250px;
    overflow: hidden;
    left: 0;
    margin: 0;
    float:left;
     transition:0.5s;
}

    #sidebar.hide-sidebar {
        width:0px;
        transition:0.5s;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="sidebar">
    <img src="img/user.jpg" alt="Random guy" class="headshot" />
    <span id="username">Random Name</span>
    <ul class="menu">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

  <div id="wrapper" class="hide-sidebar">
    <div id="main">
      <div>
        <button id="sidebarToggle">Hide Sidebar</button>
      </div>
      <h2>The World - from .NET Core 2.0</h2>
  </div>

关于jquery - 为什么我的 css 类从未执行过？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46883206/

24

4

0

文章推荐： python - 修改数据框中的多行

文章推荐： python - 如何使用 statsmodels python 进行 2SLS IV 回归？

文章推荐： c - 指向 CharArray 的 IntPointer 和 C 中的类型信息

文章推荐： python - GridSearchCV 评分和 grid_scores_

macos - 执行 wine != 执行 `which wine`
我有一个“有趣”的问题，即以两种不同的方式运行 wine 会导致: $> wine --version /Applications/Wine.app/Contents/Resources/bin/wi
javascript - CRONTAB 执行 Python，使用 puppeteer 执行 Node 来进行网页抓取不起作用
我制作了这个网络抓取工具来获取网页中的表格。我使用 puppeteer (不知道 crontab 有问题)、Python 进行清理并处理数据库的输出但令我惊讶的是，当我执行它时 */50 * * *
javascript - 对 javascript 函数的 Objective-C 调用何时被调用/执行，何时不被调用/执行？
JavaScript 是否被调用或执行取决于什么？准确地说，我有两个函数，它们都以相同的方式调用: [self.mapView stringByEvaluatingJavaScriptFromStri
python - 为什么使用 statsmodels 执行 OLS 和使用 scikit 执行 PooledOLS 时会得到相同的结果？
我目前正在使用 python 做一个机器学习项目(这里是初学者，从头开始学习一切)。只是想知道 statsmodels 的 OLS 和 scikit 的 PooledOlS 使用我拥有的相同面板数据
c# - 通过 Enterprise Guide 执行 SAS 和从 .Net 执行 IOM 之间的区别
在使用集成对象模型 (IOM) 后，我可以执行 SAS 代码并将 SAS 数据集读入 .Net/C# 数据集 here . 只是好奇，使用 .Net 作为 SAS 服务器的客户端与使用 Enterpr
javascript - jQuery 不会使用 animate : top 200px function. 执行，但它会使用 animate: height 执行
有一些直接的 jQuery 在单击时隐藏打开的 div 未显示，但仍将高度添加到导航中以使其看起来好像要掉下来了。这个脚本工作正常: $(document).ready(funct
java - 为什么我的代码使用 'IF' 执行 'ELSE' 和 '==' ，但不使用 '.equals' 执行？
这个问题已经有答案了: How do I compare strings in Java? (23 个回答) 已关闭 4 年前。这里是 Java 新手，我正在使用 NetBeans 尝试一些简单的代
python - Keras 2.0.8 仅使用 Python 3.x 执行 1 个 epoch，使用 2.x 执行 10 个
如果我将它切换到 Python 2.x，它执行 10。这是为什么？训练逻辑回归模型 import keras.backend as
JavaScript 执行
我有两个脚本，它们包含在 HTML 正文中。在第一个脚本中，我初始化一个 JS 对象，该对象在第二个脚本标记中引用。 ... obj.a = 1000; obj.
执行@number时的Java链接列表错误消息
每当我运行该方法时，我都会收到一个带有数字的错误以下是我的代码。 public String getAccount() { String s = "Listing the accounts";
java - 执行 while 循环以显示菜单
我已经用 do~while(true) 创建了我的菜单；但是每次用户输入一个数字时，它不会运行程序，而是再次显示菜单!你怎么看？ //我的主要方法 public static void main(St
ipython - 执行/命令完成时通知
执行命令后，如何让IPython通知我？我可以使用铃声/警报还是通过弹出窗口获取它？我正在OS X 10.8.5的iTerm上运行Anaconda。最佳答案使用最新版本的iTerm，您可以在she
java - Swing 执行
您好，我刚刚使用菜单栏为 Swing 编写了代码。但是问题出现在运行中。我输入: javac Menu.java java Menu 它没有给出任何错误，但 GUI 没有显示。这是我的源代码以供引用:
.net - 执行.NET应用程序时验证Authenticode签名
我觉得这里缺少明显的东西，但是我看不到它写在任何地方。我使用Authenticode证书对可执行文件进行签名，但是当我开始学习有关它的更多信息时，我对原样的值(value)提出了质疑。签名的exe
按钮单击事件上的 JavaScript 执行
我正在设计一个应用程序，它使用 DataTables 中的预定义库来创建数据表。我想对数据表执行删除操作，为此应在按钮单击事件上执行 java 脚本。 $(document).ready(functi
Haskell - 执行 while 循环
我是 Haskell 新手，如果有人愿意帮助我，我会很高兴!我试图让这个程序与 do while 循环一起工作。第二个 getLine 命令的结果被放入变量 goGlenn 中，如果 goGlenn
java - 执行 while 循环时出现问题
我有一个用 swing 实现迷你游戏的程序，在主类中我有一个循环，用于监听游戏 map 中的 boolean 值。使用 while 实现的循环不会执行一条指令，如果它是唯一的一条指令，我不知道为什么。
java - 执行.jar时将OJBDC添加到类路径
我正在尝试开发一个连接到 Oracle 数据库并执行函数的 Java 应用程序。如果我在 Eclipse 中运行该应用程序，它可以工作，但是当我尝试在 Windows 命令提示符中运行 .jar 时，
java future 执行
我正在阅读有关 Java 中的 Future 和 javascript 中的 Promises 的内容。下面是我作为示例编写的代码。我的问题是分配给 future 的任务什么时候开始执行？当如下行创
java - 执行 && 最有效的方法？
我有一个常见的情况，您有两个变量(xSpeed 和 ySpeed)，当它们低于 minSpeed 时，我想将它们独立设置为零，并在它们都为零时退出。最有效的方法是什么？目前我有两种方法(方法2更干净

首页

博学

6Ren·AI

商城

jquery - 为什么我的 css 类从未执行过？