我有一系列显示和隐藏相应 div 的按钮。我希望这些按钮在单击后隐藏,但在单击另一个按钮时再次显示。我希望下面的内容能让这一点变得更清楚。
<强> Plunk Link
目前,我的按钮在单击后会隐藏,但在单击其他按钮时不会重新出现。我怎样才能做到这一点?
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>
<div class="showSingle" target="1"><a>Div 1</a></div>
<div class="showSingle" target="2"><a>Div 2</a></div>
<div class="showSingle" target="3"><a>Div 3</a></div>
<div class="showSingle" target="4"><a>Div 4</a></div>
<小时/>
<script>
$(function(){
$('.showSingle').click(function(){
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).show();
$(this).hide();
$('html, body').animate({ scrollTop: 0 }, 'fast');
});
});
</script>
最佳答案
使用 $('.showSingle:hidden').add(this).toggle();
显示之前隐藏的 div。
:hidden
搜索隐藏元素,add()
添加当前元素。 toggle()
根据当前状态更改元素状态隐藏/显示。
$(function(){
$('.showSingle').click(function(){
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).show();
$('.showSingle:hidden').add(this).toggle();
$('html, body').animate({ scrollTop: 0 }, 'fast');
});
});
<强> Updated Plunk
或者让它更短,
$('.showSingle').click(function(){
$('.targetDiv:visible').add($('#div'+$(this).attr('target'))).toggle();
$('.showSingle:hidden').add(this).toggle();
$('html, body').animate({ scrollTop: 0 }, 'fast');
});
关于javascript - 隐藏事件的点击事件然后重新出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30035133/