我不太了解Jquery,我被困住了,谁能帮忙。
单击时会向下滑动的 I 框,但是我想要它们以便一次只能出现一个。在您打开一个的那一刻,另一个它们都保持打开状态。有谁知道如何做到这一点,以便当一个打开并单击第二个时,第一个关闭而第二个打开?
谢谢。
请不要提供外部链接,您应该在问题中发布代码。提供一个重现您的问题的 jsfiddle.net 会好得多。
来到你的问题,
对这些点击事件中的两个元素执行 slideToggle。
$('#dropdown').on('click',function(){
$('.dropdownwrap').slideDown();
$('.dropdownwrap2').slideUp();
});
$('#dropdown2').on('click',function(){
$('.dropdownwrap').slideUp();
$('.dropdownwrap2').slideDown();
});
您也可以使用jquery Accordion
.its 来解决您的问题,因为如果您的菜单数量增加,您编写滑动切换代码的复杂性也会增加。所以让手风琴为你处理
如果你向我们展示你的代码,我可以给你一个更具体的答案,但你应该能够使用这样的东西:
$('.selector').click(function() {
$(this).siblings().slideToggle();
});
这样,当您单击“选择器”类中的任何元素时,它会专注于您单击的 $(this) 元素,查找下拉列表的所有其他当前同级并切换所有这些同级,包括您单击的那个。因此,它应该打开您单击的那个并关闭所有其他的。
你为什么不使用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>
[更新] 重播user2246968评论:检查这个小提琴它是您代码相同结构的快速解决方法,但我仍然建议您花一些时间检查jQuery UI Accordion。