向下滑动按钮以显示文本 HTML CSS
[英]Slide down button to show text HTML CSS
问题描述
I'm trying to make a button on my website slide down to show text, but currently it only shows the button with the text under it.
我试图让我的网站上的按钮向下滑动以显示文本，但目前它只显示带有文本的按钮。 The button does not do anything but click.该按钮除了单击之外什么也不做。 I want the text at the bottom to appear once I click the button.单击按钮后，我希望底部的文本出现。 I used .slideDown() but it is only making the button appear instead of giving it any function.我使用了.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
Some corrections, plus a solution to what I think you are trying to achieve:一些更正，以及我认为您正在努力实现的解决方案：
- Don't use
[class=interests]in the CSS, the dot is made for that:.interests!不要在 CSS 中使用[class=interests]，点是为此而生的：.interests！ - Don't use
[id=all-contents]in the CSS, the#is made for that:#all-contents!不要在 CSS 中使用[id=all-contents]，#就是为此而生的：#all-contents！ - Don't use spaces in class names !不要在类名中使用空格！
professional interests→professional_interests,professional interests→professional_interestsprofessional interests， - There was a missing closing
</div>in your HTML.您的 HTML 中缺少结束</div>。 - Then, in the script, you can use
.next('ul')to target theulright after yourbutton.然后，在脚本中，您可以使用.next('ul')在button之后立即定位ul。
Snippet片段
// 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
i think this would be much easier if you had the text you want to show when clicking the button hidden我认为如果您在单击隐藏的按钮时想要显示文本，这会容易得多
<div style="display: none;">My Text</div>
and then make it visible when clicking the button with this function:然后在单击具有此功能的按钮时使其可见：
function showText() {
getElementById("textId").style.display="block";
then just add the function to your button:然后只需将该功能添加到您的按钮：
<button onclick="showText()">My Button</button>
i hope this helps.我希望这有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
显示按钮可在滑动后向下滑动标题 - Show Button to slide down the header after slide
HTML和CSS3向下滑动 - HTML & CSS3 Slide Down
jQuery元素显示并在按钮单击时向下滑动 - jQuery element show and slide down on button click
CSS：滑动按钮onclick并显示内容？ - CSS: slide button onclick and show content?
如何使用CSS / jQuery向下滑动以显示DIV的内容？ - How to slide down to show content of DIV using CSS/jQuery?
如何在javascript或jQuery中显示/向下滑动相关的单选按钮 - How to show/slide down a related radio button in javascript or jquery
徽标不会滑落（HTML、CSS、jQuery） - Logo Won't Slide Down (HTML, CSS, jQuery)
使用CSS和JavaScript的幻灯片放映 - slide show with css and javascript
如何在滑块的文本上使用fadeInUp动画，当用户单击下一个幻灯片按钮时，使用html，css和javascript - how to use fadeInUp animation on slider's text ,when user clicks next-slide button, with html , css and javascript
CSS向下滑动并在文档单击时向上滑动 - CSS Slide Down and Slide Up on document click
相关标签