HTML JavaScript隱藏/顯示按鈕

Question

我正在研究一個小小的Ruby on Rails應用程序，我試圖添加一個隱藏/顯示按鈕，它隱藏了某個ID的div。我已按照this後的步驟進行操作，並隱藏了內容（第二個答案）。問題是內容不會永久隱藏。一旦我點擊按鈕，內容消失，然後瀏覽器做一些像自動刷新和內容再次出現。

任何人都可以幫助我嗎？這是我的第一個應用程序，我在JavaScript的背景是相當差...

一塊我想隱藏的代碼/顯示如下：

<div id='test'> 
    <div class="col_4 patients-list"> 
    <!-- Patients list --> 
    <h5>Patients en cours: <%= @patients.size %></h5> 
    <div> 
     <% @patients_anomaly.each do |patient| %> 
     <div class="patient-anomaly"><%= link_to_patient patient %></div> 
     <% end %> 
     <% (@patients_to_exit - @patients_anomaly).each do |patient| %> 
     <div class="patient-to-exit"><%= link_to_patient patient %></div> 
     <% end %> 
     <% @patients_normal.each do |patient| %> 
     <div class="patient-normal"><%= link_to_patient patient %></div> 
     <% end %> 
    </div> 
    </div> 
</div> 
<button>Click</button> 

和按鈕的JavaScript是：

<script type="text/javascript"> 
    $("button").click(function() { 
    $("#test").toggle('hide'); 
    }); 
</script> 

在此先感謝您。

Answer 1

您可以設置type="button"到button因爲默認行爲是submit其submits頁面以頁面在default state所示。

<button type="button">Click</button> 

Answer 2

我看到你標記了jQuery，你試過 $('#element').hide()和$('#element').show()？

Documentation for show， Documentation for hide

Answer 3

取而代之的是<button>Click</button>，添加此

= link_to 'Hide', 'javascript:void(0);', id: 'hideContent' 

然後在Javascript

$('#hideContent').on('click', function(){ 
    $('#test').toggle('hide'); 
}); 

這不會重新加載頁面。

希望有幫助！

Answer 4

<div id='test'></div> 
<button id="hide_show">Click</button> 
<script> 
    $('#hide_show"').click(function(){ 
    $('#test').toggle(); 
    }); 
</script>