切换多个搜索区域和句柄图标

时间:2013-01-31 22:25:33

标签: jquery html

我需要做的是在点击<h2>时切换每个搜索区域。

我还需要它来切换<h2> <span>元素上的类icon-minus和icon plus。 (这在我的小提琴上没有显示,因为它需要安装字体。)

在加载时,它应显示仅显示第一个搜索区域,其余部分隐藏(显示:无)。

它还必须能够切换当前搜索区域和图标。

我有一次跛脚的尝试jsFiddle

1 个答案:

答案 0 :(得分:1)

你可以这样做。你只需要添加一个.not(),这样当前的div就不会被其他人隐藏

$('.s-container h2').on('click', function () {
  var $el = $(this);
  var div = $el.next('.s-area');
  $('.s-area').not(div).hide(); // hide all but the current one that is toggling
  div.slideToggle('fast',function(){ 
      // add correct class accordingly to the h2 elemeents
      $('.s-container h2').attr('class',function(){
            return $(this).next('.s-area').is(':visible') ? 'icon-minus' : 'icon-plus';
      });
  });
});

http://jsfiddle.net/3KESK/