JSFiddle:http : //jsfiddle.net/ncuacvcu/
默认情况下显示DIV主页。
当我单击“链接一” /“链接二”时,“ DIV一” /“ DIV二”将替换DIV主页。当我再次单击“链接一” /“链接二”时,“ DIV 1” /“ DIV 2”开关关闭,留出空白。那我如何将DIV带回家再次显示?
同时,如果打开了DIV 1,然后单击LINK 2,我希望将DIV 1替换为DIV 2(即不通过DIV home)。
这是我尝试过的方法(以及一些改进方法),但无法使其正常工作:
$("a#one_toggle").click(function()
{
$(".hideall").not(".one").slideUp();
$(".one")slideToggle(function(){
if($('#client1').is(':visible')){
$('#client0').SlideUp();
} else{
$('#client0').SlideDown();
}
});
});
在此先感谢您提供任何提示!
您需要使用slideToggle的回调并检查带有home类的div是否可见,然后显示它。
http://api.jquery.com/slidetoggle/
$(function() {
$("a#one_toggle").click(function() {
$(".hideall").not(".one").slideUp();
$(".one").slideToggle('slow', function() {
showHome($('.one'));
});
});
$("a#two_toggle").click(function() {
$(".hideall").not(".two").slideUp();
$(".two").slideToggle('slow', function() {
showHome($('.two'));
});
});
});
function showHome(elementToCheck) {
// now we know if the div to check is visible or not
if (!$(elementToCheck).is(':visible')) {
// the div is not visible so we show it
$('.home').slideDown();
}
}
.one,
.two {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="one_toggle">link one</a>
<a href="#" id="two_toggle">link two</a>
<div class="home hideall">
home
</div>
<div class="one hideall">
one
</div>
<div class="two hideall">
two
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句