折叠和扩展标签jquery /简单手风琴-Java 学习之路

我有关于Accordion标签的查询..

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

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

该网页如下所示：

enter image description here

我希望首先将这两个标签折叠起来 . 当点击 ABOUT 时，它应该展开并显示内容 . 一旦点击 Home ，它应该折叠 ABOUT 标签并展开主页

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

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

2 回答

0
如果您使用jQuery UI Accordion，您可以向手风琴添加简单的事件 .

或添加事件：
```
$( ".selector" ).bind( "accordioncreate", function(event, ui) {
  $( ".selector" ).accordion( "option", "active", -1 )
});
```
回复于 2024-05-02T06:38:33+08:00

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

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
});

回复于 2024-05-02T06:38:33+08:00

折叠和扩展标签jquery /简单手风琴

2 回答

-------

相关问题