在打开和关闭列表之间切换

Question

我有类似常见问题列表的以下代码。当用户点击按钮时，信息向下滑动以显示内容。然后，他们可以单击相同的按钮来关闭内容。

由于我在此页面上有多个列表，我想要的是如果列表打开并且用户单击另一个列表以打开它，则打开列表将关闭，另一个列表将打开。这样，用户没有一英里长的滚动条。

这是我的代码：

JS

$('.service').live('click',function(){
  $(this).parent().children().toggle();  //swaps the display:none between the two spans
  $(this).parent().parent().find('.content').slideToggle();  //swap the display of the main content with slide action
 });

$('.service').click(function(e) {
  e.preventDefault(); //Prevents link from taking them to top of page
});

HTML

<div class="service-container">
 <div class='service-title'>
  <a href="#" class="service fancy_button"><span style="background-color: #0f071e;"><i class="icon-plus"></i> Open</span></a>
  <a href="#" class="service fancy_button" style="display:none;"><span style="background-color: #666;"><i class="icon-minus"></i> Close</span></a>
  </div>
   <div class='content' style='display:none;'>
      <p>My Content</p>
   </div>
</div>

如果有更好的方法，我不介意重新编写代码。

这个想法：

Answer 1

主要是我建议您不要使用live()方法，因为它已被弃用。相反，您可以通过以下方式使用方法on()：

$(".service-title").on("click", ".service", function(e) {
    $(this).siblings().andSelf().toggle()
        .parent().siblings(".content").slideToggle();

    e.preventDefault();
});

DEMO： http://jsfiddle.net/bnT6Q/

为了在当前打开时关闭其他已打开的容器，我们可能会稍微重写一下代码：

$(".service-title").on("click", ".service", function(e) {
    $(".service-container")
        .has($(".content:visible").add(this))
        .find(".service").toggle().end()
        .find(".content").slideToggle();

    e.preventDefault();
});​

DEMO： http://jsfiddle.net/bnT6Q/1/