向下滑动按钮显示文本 HTML CSS

Question

我试图让我网站上的按钮向下滑动以显示文本，但目前它只显示按钮及其下方的文本。该按钮除了单击外什么都不做。单击按钮后，我希望底部的文本出现。我使用了 .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>

Answer 1

我认为如果您在单击隐藏按钮时有想要显示的文本，这会容易得多

   <div style="display: none;">My Text</div>

然后使用此功能单击按钮时使其可见：

 function showText() {
 getElementById("textId").style.display="block";

然后只需将功能添加到您的按钮即可：

<button onclick="showText()">My Button</button>

希望对您有所帮助。

Answer 2

一些更正，以及我认为您正在努力实现的目标的解决方案：

不要在 CSS 中使用 [class=interests]，点是为此而制作的：.interests !
不要在 CSS 中使用 [id=all-contents]，# 就是为此而设计的：#all-contents !
不要在 class 名称中使用空格！ professional interests → professional_interests,
您的 HTML 中缺少结尾 </div>。
然后，在脚本中，您可以使用 .next('ul') 在您的 button 之后使用 ul 来定位 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>

向下滑动按钮显示文本 HTML CSS

Slide down button to show text HTML CSS

jquery

html

css

slidedown