Question

我有一个简单的手风琴设置与jQuery的HTML结构：

<div  class="accordion_headings">Title 1</div>
<div class="accordion_child">Accordion Content 1</div>

<div  class="accordion_headings">Title 2</div>
<div class="accordion_child">Accordion Content 2</div>

和这个脚本

$('div.accordion_headings').click(function() {
    $('div.accordion_child').slideUp('normal'); 
    $(this).next().slideDown('normal');
});

$("div.accordion_child").hide();

现在我还希望在点击任何一个手风琴链接时换出页面上的另一个div，这样我就可以在链接中添加更多类

<div  class="accordion_headings link1">Title 1</div>
<div class="accordion_child">Accordion Content 1</div>

<div  class="accordion_headings link2">Title 2</div>
<div class="accordion_child">Accordion Content 2</div>

并添加了我想换出的div内容

<div id="content_1" class="swap">Content 1</div>
<div id="content_2" class="swap">Content 1</div>

这是我提出的脚本（在嗅探Stack Oveflow之后）

$(document).ready(function () {

    var clickHandler = function (link) {
         $('.swap').hide();
         $('#content_' + link.data.id).show();
         $('.selected').removeClass('selected');
         $(this).attr('class','selected');
   }

   $('.link1').bind('click', {id:'1'} ,clickHandler);
   $('.link2').bind('click', {id:'2'} ,clickHandler);

});

几乎可以工作..但是在点击手风琴时它现在移除了accordion_headings类并且破坏了我的造型......奇怪的是手风琴仍然有用吗？有人可以帮我清理一下。我也将如何动画或使用淡入淡出？我会用fadeIn fadeOut替换hide和show吗？谢谢。

Answer 1

而不是：

$(this).attr('class','selected');

使用

$(this).addClass("selected");

我还建议你不要使用裸类选择器（例如“.link1”），因为它们通常比带有标签的选择器慢得多。以下是建议的更改：

$(document).ready(function() {
  var clickHandler = function(evt) {
    $('div.swap').hide();
    $('#content_' + link.data.id).show();
    $('div.selected').removeClass('selected');
    $(this).addClass("selected");
  }
  $('div.link1').bind('click', {id:'1'}, clickHandler);
  $('div.link2').bind('click', {id:'2'}, clickHandler);
});

JQuery隐藏/显示手风琴的div

1 个答案: