时间戳

首页 > 解决方案 > 如何使用正确样式的 JQuery 和 HTML 做一个常见问题解答滑块？

jquery - 如何使用正确样式的 JQuery 和 HTML 做一个常见问题解答滑块？

问题描述

我正在做一个网站，在其中一个页面中，我需要使用 JQuery 放置一个常见问题解答滑块。我在它的样式上遇到了问题，因为滑块的大小超过了它需要的大小。 s

附件请找到到目前为止的 HTML 和 CSS 代码。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>The Greatest Showman Review</title>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/script.js"></script>
  </head>
  <body>
    <header>
      <h1>'The Greatest Showman' Review</h1>
      <img src="images/logo.png" alt="Logo"/>
    </header>
    <div class="topnav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a class="active" href="#aboutUs">About Us</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contactUs.html">Contact Us</a></li>
      </ul>
    </div>
    <main>
      <section class="a">
        <h2>Description</h2><br/>
        <!-- <img src="images/elephant2.jpg" alt="Elephant" class="sectiona-image" /> -->
        <p>The film contains a set of actors.</p>
      </section>
      <section class="b">
        <div>
          <ul>
            <li class="q">What is HTML?</li>
            <li class="a">Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.</li>
            <li class="q">What is CSS?</li>
            <li class="a">Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.</li>
            <li class="q">What is JavaScript?</li>
            <li class="a">an object-oriented computer programming language commonly used to create interactive effects within web browsers.</li>
            <li class="q">What is jQuery?</li>
            <li class="a">jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.
            </li>
          </ul>
        </div>
        <script>
          function faqControl() {
            $('.a').hide();
            $(".q").on("click", function() {
              var answer=$(this).parent('li').find('.a');
              if(a.css('display') == 'none')
              {
                $('.accordion').removeClass('active');
                $('.panel').slideUp('fast');
                answer.slideDown();
                $(this).addClass('active');
              }
              else
              {
                answer.slideUp();
                $(this).removeClass('active')
              }
            });
          }

          )
          ;
        </script>
        <!-- <img src="images/elephant3.jpg" alt="Elephant" class="sectionb-image" /> -->
        <!-- <img src="images/elephant4.jpg" alt="Elephant" class="sectionb-image" /> -->
      </section>
    </main>
    <div class="clear"></div>

    <footer>
      Copyright &copy; 2018
    </footer>
  </body>
</html>

CSS

.b div {
  background-color: #DCF7DB;
  margin: 10px 0px auto;
  padding: 0px;
  width: 80%;
}

.b li {
  width: 90%;
  display: block;
  font-size: 14px;
  font-family: Tahoma;
  padding: 10px;
  margin: 10px auto;
  color: #0E3C29;
}

.b li.q {
  font-size: 1.3em;
  cursor: pointer;
  background-color: #CCCCCC;
}

.b li.a {
  margin-left: 10px;
  font-size: 1em;
}

#container {
  width: 100%;
  margin: 10px auto;
  overflow: hidden;
}

你能告诉我如何解决这个问题吗？问候，皮埃尔

标签： jqueryhtmlcss

解决方案

推荐阅读