JQuery anzeigen() Methode doesnot Arbeit als

Question

erwartete ich habe folgenden div Block

 <div class="score-description col-sm-3"> 
      <table class="table table-striped"> 
       <thead> 
        <th> Score 
        </th> 
        <th> Description 
        </th> 
       </thead> 
       <tr> 
        <td>0</td> 
        <td>Poor</td> 
         ... 
         ... 
       </tr> 
      </table> 

     </div> 

ich diesen Block zeigen wollte, wenn die folgende Schaltfläche geklickt wird.

<Button class="btn btn-warning show-score-description-button"> 
    Score Descriptions 
</Button> 

Ich habe das folgende Skript, um den Block zu zeigen

$(".show-score-description-button").click(function(){ 
     $(".score-description").show(); 
}) 

CSS für .score-Beschreibung Klasse

.score-description{ 
     position: fixed; 
     z-index: 1; 
     overflow: scroll; 
     margin-top:-100px; 
     height: 50%; 
     margin-left: 7%; 
     margin-top: 5%; 
     background-color: #ffffff; 
     display: none; 

    } 
    .score-description table th{ 
     border: 2px solid #aaaabb; 
    } 
    .score-description table td{ 
     border: 2px solid #aaaabb; 
    } 

Problem ist, wenn ich auf die Schaltfläche klicken der Block dargestellt ist und versteckt sich sofort. Was vermisse ich??

Answer 1

Machen Sie Ihre Taste type="button". Derzeit übermittelt Ihre button die Seite. So zeigt es die Seite im Standardzustand an.

<Button type="button" class="btn btn-warning show-score-description-button"> 
Score Descriptions 

Answer 2

Versuchen toggle()

$(".show-score-description-button").click(function() { 
    $(".score-description").toggle(); 
})