向下滑動按鈕以顯示文本 HTML CSS
[英]Slide down button to show text HTML CSS
問題描述
我試圖讓我的網站上的按鈕向下滑動以顯示文本，但目前它只顯示帶有文本的按鈕。 該按鈕除了單擊之外什么也不做。 單擊按鈕后，我希望底部的文本出現。 我使用了.slideDown()但它只是讓按鈕出現而不是給它任何功能。
<html> <head> <style> body { background: rgb(230, 230, 255); color: rgb(0, 0, 0); padding: 10px; font-family: Georgia; } header { font-size: 1.5em; font-weight: bold; } [id=all-contents] { max-width: 800px; margin: auto; } /* navigation menu */ nav { background: rgb(239, 80, 41); margin: 0 auto; margin-bottom: 20px; display: flex; padding: 10px; border-radius:2em; border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; } nav header { display: flex; align-items: center; color: rgb(255, 255, 255); flex: 1; } nav ul { list-style-image: none; } nav li { display: inline-block; padding: 0 10px; } nav a { text-decoration: none; color: #fff; } /* main container area beneath menu */ main { background: rgb(245, 238, 219); display: flex; } [class=sidebar] { margin-right: 25px; padding: 10px; } [class=sidebar] img { width: 200px; } [class=content] { flex: 1; padding: 15px; } [class=interests] header { font-size: 1.25em; } </style> <title>Website</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("ul.professional interests").slideDown(); }); }); </script> </head> <body> <div id="all-contents"> <nav> <header>Website</header> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> </ul> </nav> <main> <div class="sidebar"> <img src="https://mail.google.com/mail/u/0/?ui=2&ik=4df09cafb2&view=fimg&th=165452a04091804b&attid=0.1.1&disp=emb&attbid=ANGjdJ9lewmMheGHuQrx4zaTH2buVPilOzWqvInJBZxDZsnva2ziG_NFaDFjBtTzmraafUlg5Km7HQSkwzmjRtgVV3FtzYRjLGvV9B2gueoBBfFmAO60Fhr9h-LAmhQ&sz=s0-l75-ft&ats=1534463719799&rm=165452a04091804b&zw&atsh=1"> </div> <div class="content"> <header> </header> <p> Student</p> <section class="interests"> <header>Very Interesting Interests</header> <ul> <li>Reading</li> <li>Coding</li> <li>Writing</li> </ul> </section> </main> <main class="container2"> <div class="professional-content"> <header>About Me</header> <section class = "interests"> <button> My professional interests</button> <ul class = "professional interests"> <li> Political Analysis </li> <li> Computer Science </li> </ul> <button> My Resume </button> <ul class = "My Resume"> <li> <b>IBCs:</b> </li> <li> <b>Act Scores:</b> </li> <li> <b>Classes:</b></li> <li> <b>Extracurriculars:</b> </li> <li> <b>Future Goals:</b> </li> </ul> </section> </div> </main> </div> </body> </html>2 個解決方案
解決方案1
2 已采納 2018-08-17 13:25:53
一些更正，以及我認為您正在努力實現的解決方案：
- 不要在 CSS 中使用
[class=interests]，點是為此而生的：.interests！ - 不要在 CSS 中使用
[id=all-contents]，#就是為此而生的：#all-contents！ - 不要在類名中使用空格！
professional interests→professional_interestsprofessional interests， - 您的 HTML 中缺少結束
</div>。 - 然后，在腳本中，您可以使用
.next('ul')在button之后立即定位ul。
片段
// Modified the script $(".professional-content button").click(function() { $(this).next('ul').slideDown(); });
body { background: rgb(230, 230, 255); color: rgb(0, 0, 0); padding: 10px; font-family: Georgia; } header { font-size: 1.5em; font-weight: bold; } #all-contents { max-width: 800px; margin: auto; } /* navigation menu */ nav { background: rgb(239, 80, 41); margin: 0 auto; margin-bottom: 20px; display: flex; padding: 10px; border-radius: 2em; border-top-left-radius: 2em; border-top-right-radius: 2em; border-bottom-right-radius: 2em; border-bottom-left-radius: 2em; } nav header { display: flex; align-items: center; color: rgb(255, 255, 255); flex: 1; } nav ul { list-style-image: none; } nav li { display: inline-block; padding: 0 10px; } nav a { text-decoration: none; color: #fff; } /* main container area beneath menu */ main { background: rgb(245, 238, 219); display: flex; } .sidebar { margin-right: 25px; padding: 10px; } .sidebar img { width: 200px; } .content { flex: 1; padding: 15px; } .interests header { font-size: 1.25em; } /* TAKIT: Added the below */ button { display: block; /* To avoid inline */ } .professional-content ul { display: none; transition: 500ms all ease; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="all-contents"> <nav> <header>Ani's Amazing Website</header> <ul> <li><a href="index.html">Home</a></li> <li><a href="portfolio.html">Portfolio</a></li> </ul> </nav> <main> <div class="sidebar"> <img src="https://mail.google.com/mail/u/0/?ui=2&ik=4df09cafb2&view=fimg&th=165452a04091804b&attid=0.1.1&disp=emb&attbid=ANGjdJ9lewmMheGHuQrx4zaTH2buVPilOzWqvInJBZxDZsnva2ziG_NFaDFjBtTzmraafUlg5Km7HQSkwzmjRtgVV3FtzYRjLGvV9B2gueoBBfFmAO60Fhr9h-LAmhQ&sz=s0-l75-ft&ats=1534463719799&rm=165452a04091804b&zw&atsh=1"> </div> <div class="content"> <header> Ani Gonzales </header> <p> Northshore Student</p> <section class="interests"> <header>Very Interesting Interests</header> <ul> <li>Reading</li> <li>Coding</li> <li>Writing</li> </ul> </section> </div><!-- TAKIT: Added, it was missing --> </main> <main class="container2"> <div class="professional-content"> <header>About Me</header> <section class="interests"> <button>My professional interests</button> <ul class="professional_interests"> <li> Political Analysis </li> <li> Computer Science </li> </ul> <button>My Resume</button> <ul class="My Resume"> <li> <b>IBCs:</b> </li> <li> <b>Act Scores:</b> </li> <li> <b>Classes:</b></li> <li> <b>Extracurriculars:</b> </li> <li> <b>Future Goals:</b> </li> </ul> </section> </div> </main> </div>
解決方案2
1 2018-08-17 13:15:56
我認為如果您在單擊隱藏的按鈕時想要顯示文本，這會容易得多
<div style="display: none;">My Text</div>
然后在單擊具有此功能的按鈕時使其可見：
function showText() {
getElementById("textId").style.display="block";
然后只需將該功能添加到您的按鈕：
<button onclick="showText()">My Button</button>
我希望這有幫助。
如何在javascript或jQuery中顯示/向下滑動相關的單選按鈕
[英]How to show/slide down a related radio button in javascript or jquery
如何在滑塊的文本上使用fadeInUp動畫，當用戶單擊下一個幻燈片按鈕時，使用html，css和javascript
[英]how to use fadeInUp animation on slider's text ,when user clicks next-slide button, with html , css and javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.