javascript - 隐藏事件的点击事件然后重新出现

Question

我有一系列显示和隐藏相应 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>

Answer 1

使用 $('.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');
});