隱藏主動點擊事件，然後重新出現

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();顯示以前隱藏的股利。

: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'); 
}); 

Answer 2

$('.showSingle').click(function(){ 
       $(".showSingle").show(); 
       $('.targetDiv').hide(); 
       $('#div'+$(this).attr('target')).show(); 
       $(this).hide(); 
       $('html, body').animate({ scrollTop: 0 }, 'fast'); 
     });