1

每个人。我搜索了这个网站和许多其他网站，以了解为什么 toggleClass 函数在我的 Jquery 代码中不起作用，虽然我找到了几种不同的解释，但它们与我想要的效果不符。

我对 Jquery 很陌生，所以我不确定 Jquery 的功能。这是我的 Jquery 代码：

$("document").ready(function(){
   $("div#btn-slide").click(function(){
      $("div#panel").slideToggle("slow");
      $("div#btn-slide").toggleClass("smallbox");
   });
});

这是我的 HTML 代码。

<div id="panel">
</div>

<div id="btn-slide">
</div>

我这里要找的效果很简单。当单击较小的 div (btn-slide) 时，位于较小 div 上方的较大 div (面板) 将上升到浏览器屏幕中直到完全隐藏，这就是我使用 slideToggle("slow" ） 功能。

然后我要做的最后一件事是让较小的 div (btn-slide) 更改其背景图像。这就是我使用 toggleClass("smallbox") 的原因。smallbox 类在我的 CSS 文件中，其中有一个向下箭头的背景图像。当较大的 div（面板）滑入其隐藏位置时，这是我希望在较小的 div（btn-slide）中显示的图像。

我让它工作的唯一方法是进入我的 CSS 文件，并将 !important 放在'smallbox' CSS 类的背景图像的末尾，但我想知道这种效果的正确 Jquery 技术.

注意：我希望能够单击较小的 div (btn-slide) 并在每次单击时将背景图像更改为相应的箭头。

我如何实现这个效果？

谢谢！

更新：我非常感谢您的所有回复。好的，你所有的回复都让我思考，所以我再次查看了 toggleClass 函数，我相信我现在已经让代码正常工作了。这是我的 CSS 代码。

#PANEL {
        width: 240px;
        height: 320px;
        background-color: #000000;
        margin: 0px auto;
    }

    #BUTTON {
        width: 100px;
        height: 50px;
        background-image:url(Arrow_Up.jpg);
        background-repeat: no-repeat;
        margin: 0px auto;
    }

    #BUTTON.GoUp {
        background-image:url(Arrow_Down.jpg);
    }

现在，我的错误显然是我使用指定的背景图像单独添加类 .GoUp 而不是将新类附加到#BUTTON。我更改了代码，现在一切似乎都正常了。

再次感谢大家的快速回复！

4

3 回答 3

1

问题是当你的 css 被加载时，DOM 只是在加载Arrow_Up.jpg图像。它没有加载Arrow_Down.jpg. CSS 不能动态加载图像。

可能的解决方案：

  • 使用 JS 即时加载图像（请参阅此SO 答案）
  • Arrow_Down.jpg通过将图像放置在另一个元素的背景中并使用隐藏它来确保在页面加载时加载图像display: none。然后就可以使用JS来添加和删除一个类了。密码笔
于 2016-03-18T16:21:55.813 回答
0

您添加 !important 的方法是正确的。您正在向 div 引入第二个 background-image 指令，因此您必须明确说明您希望它使用哪个指令，因此！重要。

如果您真的想要一个纯 jQuery 解决方案，您可以切换两个背景类，以便一次只有一个处于活动状态（这不是一个好的解决方案，因为现在您必须将所有其他 css 指令复制到两个类中，这总是一个不好的迹象）

或者您可以使用 css 函数来切换背景，例如；

if($("div#btn-slide").css("background-image") == "uparrow.jpg") {
   $("div#btn-slide").css("background-image", "downarrow.jpg");
}
else $("div#btn-slide").css("background-image", "uparrow.jpg");
于 2011-10-05T23:51:56.947 回答
0

你能发布你的CSS吗？您实际上不需要使用！important，但您需要确保“smallbox”类选择器比“btn-slide”ID 更具体。例如，在您的 CSS 文件中：

#btn-slide { background: url(oldimage.png) }
#btn-slide.smallbox { background: url(newimage.png) }
于 2011-10-06T00:11:10.817 回答