[英]close hidden div onclick and toggle another div
我正在使用以下代码来切换隐藏的div。
function toggle_visibility(id) {
var e = document.getElementById(id);
$(e).slideToggle("slow");
}
<div id="toplinks">
<a href="../index.php">Home</a> | <a href="#" onclick="toggle_visibility('aboutus');">About Us</a> | <a href="#" onclick="toggle_visibility('contact');" >Contact us</a> | <a href="#" onclick="toggle_visibility('social');">Social Media</a> | <a href="#" onclick="toggle_visibility('contact');">Send your demo</a> | <a href="#" onclick="toggle_visibility('presskit');">Press Kit</a>
</div><!--toplinks end -->
问题是,如果我都单击它们,则所有这些都将同时显示在页面中。 有没有一种方法可以自动关闭一个(如果打开的话),以便在单击时仅显示一个div?
您可以将上一个ID保存在变量中,如果不为null,请再次进行切换。 例如:
var prevId;
function toggle_visibility(id) {
if(prevId && id !== prevId){
$("#"+prevId).slideToggle("slow");
}
var e = document.getElementById(id);
$(e).slideToggle("slow");
prevId = id;
}
是。
首先,将panel
css类添加到每个要通过单击导航项而出现和消失的面板中。
其次,将css类添加到每个 <a>
标记的名称(首页,aboutus等)。
然后使用以下jQuery代码:
$(function(){
$('#toplinks a').click(function(){
$('.panel').hide(); // hide all panels
if ($(this).hasClass('home')) {
$('.panel.home').fadeIn(); // show homepage panel
}
else if ($(this).hasClass('aboutus')) {
$('.panel.aboutus').fadeIn(); // show about us panel
}
// more items ...
});
});
希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.