如何顯示文字一旦點擊了按鈕，然後如果再次點擊按鈕，它會消失？

我正在做一個網站大學作爲除外作業。無論如何，我創建了一個按鈕，並用CSS來設計它。我需要它，這樣一旦用戶單擊按鈕，它將顯示文本，然後如果用戶再次單擊該按鈕，它將消失。我試着用Jquery編碼（因爲它更容易），但即使我認爲它是正確的，它並沒有顯示出我想要在瀏覽器中顯示的方式。請幫助如何顯示文字一旦點擊了按鈕，然後如果再次點擊按鈕，它會消失？

Jquery 
 
$(document).ready(function() { 
 
    $("Belfastbutton").click(function() { 
 
    $("Belfastcontactdetails").toggle(); 
 
    }); 
 
});

#Belfastbutton { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
} 
 

 
#Belfastcontactdetails { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="Belfast">Belfast</h1> 
 
<button id="Belfastbutton">Click for Details</button> 
 
<p id="Belfastcontactdetails"> 
 
    34 Boucher Road, Belfast. 
 
    <br> Co.Antrim 
 
    <br> BT27 
 
</p>

來源

2017-03-06 matty

它是如何並不像你期望的工作？ –

您在引用您的JQuery代碼中的ID時忘記了使用「＃」。 –

你只是缺少#選擇您的按鈕和P時。

$(document).ready(function() { 
 
    $("#Belfastbutton").click(function() { 
 
    $("#Belfastcontactdetails").toggle(); 
 
    }); 
 
});

#Belfastbutton { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 5px; 
 
} 
 

 
#Belfastcontactdetails { 
 
color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 id="Belfast">Belfast</h1> 
 
<button id="Belfastbutton">Click for Details</button> 
 
<p id="Belfastcontactdetails"> 
 
    34 Boucher Road, Belfast. 
 
    <br> Co.Antrim 
 
    <br> BT27 
 
</p>

來源

2017-03-06 19:20:00 larz

非常感謝你:) – matty

對於相關信息：

你也可以接力CSS：

[for="Belfastbutton"] { 
 
    position: absolute; 
 
    color: green; 
 
    top: 310px; 
 
    left: 130px; 
 
    line-height: 40px; 
 
    width: 120px; 
 
    background-color: #e0e0d1; 
 
    border-radius: 5px; 
 
    padding: 0 5px; 
 
    text-align:center; 
 
    box-shadow:2px 2px 2px 1px gray; 
 
    transition:0.05s; 
 
} 
 
#Belfastcontactdetails { 
 
color: green; 
 
display:none; 
 
} 
 
#Belfastbutton:checked ~ #Belfastcontactdetails { 
 
display:block; 
 
} 
 
/* hide input */ 
 
#Belfastbutton {position:absolute; 
 
right:100vw; 
 
} 
 
/* add visual behavior to label */ 
 
[for="Belfastbutton"]:active { 
 
    box-shadow:-2px -2px 2px 1px gray; 
 
}

<h1 id="Belfast">Belfast</h1> 
 
<label for="Belfastbutton">Click for Details</label> 
 
<input type="checkbox" id="Belfastbutton"/> 
 
<p id="Belfastcontactdetails"> 
 
34 Boucher Road, Belfast. 
 
<br> Co.Antrim 
 
<br> BT27 
 
</p>

來源

2017-03-06 21:06:20

如何顯示文字一旦點擊了按鈕，然後如果再次點擊按鈕，它會消失？

回答

相關問題