下滑切换 jquery

Slidedown Toggle Jquery

本文关键字：jquery      更新时间：2023-09-26

我不太了解Jquery，我被困住了，谁能帮忙。

我在单击时向下滑动的框，但是我希望它们一次只能出现一个。当您打开一个时，然后另一个它们都保持打开状态。有谁知道如何做到这一点，以便当一个打开并单击第二个时，第一个关闭，第二个打开？？

例

谢谢。

你也可以

使用jquery Accordion .it是解决您问题的最佳解决方案，因为如果您的菜单数量增加，则代码滑动切换的复杂性也会增加。所以让手风琴为你处理这个问题

如果你向我们展示你的代码，我可以给你一个更具体的答案，但你应该能够使用这样的东西： 

$('.selector').click(function() {
    $(this).siblings().slideToggle();
});

这样，当您单击"选择器"类中的任何元素时，它会专注于您单击的 $（this） 元素，找到下拉列表的所有其他当前同级，并切换所有同级，包括您单击的那个。因此，它应该打开您单击的那个并关闭所有其他的。

请不要提供外部链接，您应该在问题中发布代码。给出重现您的问题的 jsfiddle.net 会好得多。

来到你的问题，

执行滑动切换这些单击事件中的两个元素。

$('#dropdown').on('click',function(){
  $('.dropdownwrap').slideDown();
  $('.dropdownwrap2').slideUp();
});
$('#dropdown2').on('click',function(){
  $('.dropdownwrap').slideUp();
  $('.dropdownwrap2').slideDown();
});

为什么不使用 JQuery UI Accordion。如果添加新部分，您将更容易管理，而且您的标题现在不会被隐藏。

从他们的示例代码中：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    Section 1 Contents
  </div>
  <h3>Section 2</h3>
  <div>
    Section 2 Contents
  </div>
  <h3>Section 3</h3>
  <div>
    Section 3 Contents
  </div>
  <h3>Section 4</h3>
  <div>
    Section 4 Contents
  </div>
</div>

</body>
</html>

[更新]在重播给用户2246968评论：检查这个小提琴，这是代码相同结构中的快速解决方法，但我仍然建议您花一些时间查看jQuery UI Accordion。

相关文章：