jquery - JQuery 可折叠面板协同工作

Question

我有一个关于使用 JQuery 的可折叠面板的简单问题。我有一个带有菜单的左侧面板（从上到下）和一个包含表单元素的底部面板。
左侧和底部面板都是可折叠的，不得重叠。问题是，当我折叠左面板时，底部面板应该扩展到全宽，反之亦然。

谁能指出我的任何例子，好吗？我找不到一个。谢谢

Answer 1

你在使用一些手风琴/折叠插件（即：jQueryUI）吗？

如果您只想使用 jQuery，可以使用.show(),.hide()和/或.toggle()..

$('.btn').click(function(){
    $('#panel1,#panel2').toggle();
})

演示

Answer 2

首先，你的问题不是很清楚，概念也很模糊。但是要达到您的要求，您应该使用 jQuery UI 并且动画应该是accordian(). 这也可以通过slideUp()&slideDown()函数的组合来实现。

下面是一个 div 元素上的示例单击事件，我在其中使用了切换和 slideUp()。

//click function for expanding event 
$(document).on('click',".bill-description",function()
{
    //close all elements other than the clicked one 
    $("element list").not($(this).next("clicked element")).slideUp(600);
    //open the clicked element
    $(this).next("clicked element").slideToggle(600);

});

上面的函数是为自定义手风琴效果而编写的。要了解手风琴效果，请阅读此内容。

第一行用于关闭所有未被点击的元素。因此not. 然后第二个用于打开单击的元素。