上一篇: javascript – 了解jQuery中的$.... 下一篇:javascript – Jquery忽略编码IS...

javascript – 折叠并展开标签jquery / simple accordion

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 折叠并展开标签jquery / simple accordion，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@L_944_0@关于Accordion标签的查询..

我使用了Accordion Menu插件下面的代码我用于页面中的选项卡.

[accordions]
  [accordion title ="about"]**Content 1** [/accordion ]
  [accordion title="Home"]**Content 2** [/accordion ]
  [/accordions]

该网页如下所示：

我希望首先将这两个选项卡折叠起来.当点击关于它时,它应该展开并显示内容.一旦点击Home它应该折叠ABOUT选项卡并展开主页

通过jquery我可以实现这一点,但我不知道下载哪个脚本并使用它..

有任何想法吗？？@H_450_18@提前致谢

解决方法

对于简单的手风琴,@L_944_0@两种不同的方法;第一个是关闭按钮,第二个是悬停触发器.

1)这是JsFiddle example with close button:

jQuery的：

$('.content').slideUp(400);//reset panels

$('.panel').click(function() {//open
   var takEID = $(this).attr('id');//takes id from clicked ele
   $('#'+takEID+'C').slideDown(400);
                             //show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takEID = $(this).attr('id').replace('Close','');
   //Strip close from id = 1second
    $('#'+takEID+'C').slideUp(400);//hide clicked close button's panel
});

HTML：

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

——-

2)这是JsFiddle example with hover trigger:

$('.panel').hover(function() {
   var takEID = $(this).attr('id');//takes id from clicked ele
   $('.content').stop(false,truE).slideUp(400);//close
   //used stop for prevent conflict
   $('#'+takEID+'C').stop(false,truE).slideDown(400);//open
   //show's clicked ele's id macthed div
});