打开/关闭图标

Question

我正在使用 jQuery 做一些恶作剧，以便在我的扩展器旁边放置小加号/减号图标。它类似于 windows 文件树或 firebugs 代码扩展器。

它有效，但不够具体。

希望这是有道理的......

$('div.toggle').hide();//hide all divs that are part of the expand/collapse
$('ul.product-info li a').toggle(function(event){
  event.preventDefault();
  $(this).next('div').slideToggle(200);//find the next div and sliiiide it
  $('img.expander').attr('src','img/content/info-close.gif');//this is the part thats not specific enough!!!
},function(event) { // opposite here
  event.preventDefault();
  $(this).next('div').slideToggle(200);
  $('img.expander').attr('src','img/content/info-open.gif');
});


<ul class="product-info">
  <li>
    <a class="img-link" href="#"><img class="expander" src="img/content/info-open.gif" alt="Click to exand this section" /> <span>How it compares to the other options</span>
  </a>
  <div class="toggle"><p>Content viewable when expanded!</p></div>
  </li>
</ul>

页面上有大量$('img.expander') 标签，但我需要具体说明。我已经尝试过 next() 功能（就像我用来查找下一个 div 一样），但它说它未定义。如何找到我的特定 img.expander 标签？谢谢。

编辑，按照道格拉斯的解决方案更新代码：

$('div.toggle').hide();
            $('ul.product-info li a').toggle(function(event){
                //$('#faq-copy .answer').hide();
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-close.gif');
                //alert('on');
            },function(event) { // same here
                event.preventDefault();
                $(this).next('div').slideToggle(200);
                $(this).contents('img.expander').attr('src','img/content/info-open.gif');
            });

Answer 1

$(this).contents('img.expander')

这就是你想要的。它将选择作为列表子节点的所有节点。在您的情况下，您的所有图像都嵌套在列表元素中，因此这只会过滤掉您想要的内容。

Answer 2

如何让您的点击事件切换父项上的 CSS 类（在您的情况下，可能是 ul.product-info）。然后，您可以使用 CSS 背景属性来更改 的背景图像，而不是使用文字 并尝试摆弄 src。您还可以在 div.toggle 上完成显示和隐藏。

ul.product-info.open span.toggler {
   background-image: url( "open-toggler.png" );
}
ul.product-info.closed span.toggler {
   background-image: url( "closed-toggler.png" );
}

ul.product-info.open div.toggle {
   display: block;
}
ul.product-info.closed div.toggle {
   display: hidden;
}

当 DOM 有很多项和深度嵌套时，使用 jQuery 导航/爬取函数可能会很慢。使用 CSS，您的浏览器将更快地呈现和更改内容。

Answer 3

你试过 .siblings() 方法吗？

$(this).siblings('img.expander').attr('src','img/content/info-close.gif');