Question

我的页面侧边菜单中有许多过滤器，允许用户过滤页面上显示的结果。我正在使用jQuery slidetoggle来切换过滤器项的显示。

html如下：

<div id="refinement-container">
<a href="#" class="closed">PRODUCT</a>
<ul id="product" class="items">      
    <li>items...</li>
</ul>
</div>

我到目前为止的jQuery是：

 jQuery(document).ready(function() {
  jQuery(".items").hide();
  //toggle the componenet with class msg_body
  jQuery(".closed").click(function()
  {
    jQuery(this).next("ul.items").slideToggle(500);
    jQuery(this).next("ul.items").addclass('opened');
    jQuery(this).next("ul.items").removeclass('closed');

  });

 jQuery(".opened").click(function()
  {
    jQuery(this).next("ul.items").slideToggle(500);
    jQuery(this).next("ul.items").addclass('closed');
    jQuery(this).next("ul.items").removeclass('opened');

  });
});

切换工作正常。但是班级没有改变切换，我希望改变，以便我可以将链接的背景图像从+更改为 - 反之亦然。我也试过toggleclass。此外，我希望能够在正在切换的ul和我单击的链接之间添加另一个html元素，以便按如下方式切换它：

<div id="refinement-container">
<a href="#" class="closed">PRODUCT</a><a href="" class="clear">clear</a>
<ul id="product" class="items">      
    <li>items...</li>
</ul>
</div>

但每当我在其间添加一个元素时，切换功能就会停止工作。有办法解决这个问题吗？

有人可以帮我解决这个问题吗？

提前谢谢

Answer 1

你在这里犯了两个错误。

- 您想要更改单击链接的类，而不是正在滑动切换的列表的类。

-Theres no class()功能。您可以使用attr()函数更改类属性..但使用addClass()和removeClass()更清晰。

所以，而不是：

jQuery(this).next("ul.items").class('opened');
...
jQuery(this).next("ul.items").class('closed');

使用它：

jQuery(this).removeClass('closed').addClass('opened');
...
jQuery(this).removeClass('opened').addClass('closed');

Answer 2

jQuery中没有.class方法。

要将类添加到元素，您应该使用addClass方法。对于删除类，您应该使用removeClass方法。

Answer 3

如果您添加<a>，则会导致选择器next("ul.items")

陷入困境

您可以简单地将行更改为：

jQuery('.reset').next("ul.items").slideToggle(500);

哦，现在我看到别的东西（可能是原因）：

<ul items">

也没有任何意义：

<ul class="items">

或

<ul id="items">

对我有用，这是一个小提琴：http://jsfiddle.net/REjdP/

jQuery Slidetoggle问题

3 个答案: