我多次使用此脚本来隐藏一些文字:
$(document).ready(function(){
$("#button_to_click_to_toggle").click(function(){
$("#hidden_div").slideToggle("medium");
});
});
我想让你不可能一次切换两个隐藏的div。
示例:
单击一个按钮(#button1)=与该按钮关联的隐藏div(#div1)显示。
单击另一个按钮(#button2)=与该按钮关联的div(#div2)显示并同时#div1关闭(滑动关闭)。
单击另一个按钮(#button3)=与该按钮关联的div(#div3)显示并同时#div2关闭(滑动关闭)。
答案 0 :(得分:1)
为所有按钮添加课程.button
,为所有div添加.div
。那么这只是一个问题:
$(".button").on('click', function () {
var id = this.id.replace('button', '');
//properly toggle visibility of selected div
if ($("#div" + id).is(":visible")) {
$("#div" + id).slideUp();
}
else {
$("#div" + id).slideDown();
}
//hide all divs except the selected one
$(".div").not("#div" + id).slideUp();
});
答案 1 :(得分:0)
还可以在点击时隐藏所有div,然后仅显示相关的div:
的javascript:
$(document).ready(function () {
$("button").click(function () {
$("div").hide();
$(this).next().show();
});
});
HTML:
<button type="button">one</button>
<div id="one">one</div>
<button type="button">two</button>
<div id="two">two</div>
<button type="button">three</button>
<div id="three">three</div>