勉強がてらWEBページを作成しておりますが、以下の課題を抱えており、解決方法をご教示いただきたいです。
HTML,CSS,JSファイルの該当部分を載せます。
■課題
1.トップ画像(img/photo1.jpg)の上に余白が空いてしまう。
2.アコーディング機能について、以下のような仕様にしたいのですが、「+」を押下すると、答え(.ansew)部分が一瞬表示されるが、直ぐに戻ってしまう。
①「+」を押下する
②答え部分が表示されると同時に「+」が「−」に変わる
③「-」を押下する
④「−」が「+」に変わり、質問のみ表示される
情報の不足等ございましたらおしらせください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charaset="UTF-8"> 5 <title>MeeTech</title> 6 <link rel="stylesheet" href="stylesheet.css" > 7 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 8 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 9 <script src="script.js"></script> 10 </head> 11 12 <body> 13 14(中略)ーーーーーーーーーーーーーーー 15トップ画像表示部分↓ 16 17 <div class="top-wrapper"> 18 <div class="contaner"> 19 <h1>あああ</h1> 20 <div class="contaner-btn"> 21 <a href="#" class="btn new register-show" ><i class="fas fa-user-alt"></i>新規登録</a> 22 <a href="#" class="btn login login-show"><i class="fas fa-sign-in-alt"></i>ログイン</a> 23 </div> 24 </div> 25 </div> 26 27(中略)ーーーーーーーーーーーーーーー 28アコーディング機能部分↓ 29 30 31 <div id="faq"> 32 <div class="faq-wrapper"> 33 <div class="container"> 34 <div class="heading"> 35 <h1>FAQ</h1> 36 </div> 37 38 <div class="faq"> 39 <ul id="faq-list"> 40 <li class="faq-list-item"> 41 <h3 class="question">?????????????????</h3> 42 <span>+</span> 43 <div class="answer"> 44 <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> 45 </div> 46 </li> 47 48 <li class="faq-list-item"> 49 <h3 class="question">?????????????????</h3> 50 <span>+</span> 51 <div class="answer"> 52 <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> 53 </div> 54 </li> 55 56 <li class="faq-list-item"> 57 <h3 class="question">?????????????????</h3> 58 <span>+</span> 59 <div class="answer"> 60 <p>AAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> 61 </div> 62 </li> 63 </ul> 64 </div> 65 </div> 66 </div> 67</div> 68 69(中略)ーーーーーーーーーーーーーーー 70 71 </body> 72</html> 73
CSS
1 2トップ画像表示部分↓ 3 4.top-wrapper{ 5 height: 600px; 6 background-image: url(img/photo1.jpg); 7 background-size: cover; 8 background-repeat : no-repeat; 9 width:100%; 10 padding:1px; 11} 12 13.top-wrapper h1{ 14 margin: 0; 15 opacity: 0.7; 16 text-align: center; 17 padding-top: 200px; 18} 19 20(中略)----- 21アコーディング機能部分↓ 22 23.faq-wrapper { 24 height:300px; 25 background-color:#bce7d2; 26 padding-top:60px; 27 padding-bottom : 50px; 28 text-align: center; 29} 30 31.faq-wrapper li{ 32 list-style: none; 33} 34 35.faq-ul{ 36 width: 400px; 37 padding-left: 500px; 38} 39 40#faq-list{ 41 width: 35%; 42 padding-left: 400px; 43} 44 45#faq-list li{ 46 margin:10px; 47 border-bottom:1px solid #708090; 48 position:relative; 49 cursor:pointer; 50 text-align: center; 51} 52 53#faq-list h3 { 54 font-size: 20px; 55 color:#808080; 56 margin:10px; 57} 58 59#faq-list p{ 60 margin: 0; 61 color:#808080; 62 margin:10px; 63} 64 65#faq-list span { 66 position:absolute; 67 top:0; 68 right:10px; 69 color:#708090; 70 font-size:17px; 71} 72 73.answer { 74 font-size: 15px; 75 padding: 0; 76 margin-bottom: 15px; 77 display:none; 78}
JS
1アコーディング機能部分↓ 2 3 4 $(".faq-list-item").click(function(){ 5 var $answer = $(this).find(".answer"); 6 if($answer.hasClass("open")){ 7 $answer.removeClass("open"); 8 $answer.slideUp(); 9 $(this).find("span").text("+"); 10 11 }else { 12 $answer.addClass("open"); 13 $answer.slideDown(); 14 $(this).find("span").text("-"); 15 }; 16 });
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/29 09:26