gpt4 book ai didi

javascript - Jquery 可折叠区域

转载 作者:行者123 更新时间:2023-11-28 21:22:27 25 4
gpt4 key购买 nike

我正在尝试使页面的各个部分可折叠。不打算使用 Accordion ,但简单的隐藏/显示以节省屏幕空间。请参阅下面的示例代码。第一个链接必须单击两次才能使该部分隐藏,第二个链接工作正常。如果您能提出更好的方法,请忽略此问题。在此示例中,div1 处于打开位置,div2 最初处于隐藏状态。

谢谢,bsr。

<小时/>
<!doctype html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>

<a class="toggle" href="#">Hide</a>
<div class="toggle">
<p>First div</p>
</div>

<a class="toggle" href="#">Show</a>
<div class="toggle" style="display: none">
<p>Second div</p>
</div>


<script type="text/javascript">
jQuery().ready(function() {
$("a.toggle").toggle(
function() {
$(this).text("Hide");
$(this).next("div.toggle").show();
},
function() {
$(this).text("Show");
$(this).next("div.toggle").hide();
}
);
});
</script>
</body>
</html>

最佳答案

我会使用toggle()函数,因为它不仅用于绑定(bind)切换事件,它还可以在不带任何参数的情况下调用切换可见性:

jQuery().ready(function() {
$("a.toggle").click(function(){
var $div = $(this).next("div.toggle");
$div.toggle();
if($div.is(':visible'))
$(this).text('Hide');
else
$(this).text('Show');
});
});

您的代码的问题是您正在显示/隐藏元素,无论其初始状态如何。无论您做什么,如果您使用 toggle(func, func) 绑定(bind)事件,第一个函数将始终首先被调用。

关于javascript - Jquery 可折叠区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5928818/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com