Q&A
前提・実現したいこと
モーダルを✖ボタンで閉じるようにしたいのですが、ボタンをクリックしfadeOutした後すぐにfadeInしてしまいます。
fadeInさせる要素の中に✖ボタンの要素が含まれているからこうなるのだろうとは思いますが解決策がわかりません。
どなたかご教授いただければ幸いです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Airbnb</title> 8 9 <!-- Latest compiled and minified CSS --> 10 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 11 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 12 13 <!-- Optional theme --> 14 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" 15 integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 16 17 <!-- Latest compiled and minified JavaScript --> 18 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 19 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 20 crossorigin="anonymous"></script> 21 22 <link rel="stylesheet" href="css/style.css"> 23 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"> 24 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 25</head> 26 27<body> 28 29 <div class="question"> 30 <div class="container"> 31 <div class="row"> 32 <h1 class="wrapper">よくある質問の答え</h1> 33 <div class="answer-wrapper"> 34 <ul> 35 <div class="answer-first col-md-6"> 36 <div class="faq-content"> 37 <li> 38 <a href="#">Airbnbホストになれるのはどんな人？</a> 39 </li> 40 <li class="answer"> 41 <div class="modal"> 42 <i class="fas fa-times close-modal"></i> 43 <h4>Airbnbホストになれるのはどんな人？</h4> 44 <p>一部の地域を除き、Airbnbでホスティングを始めるのはとても簡単です。リスティングの作成および掲載もすべて無料。 45 マンションやアパート、一軒家のまるまる貸切から個室、ツリーハウス、お城などはAirbnbで掲載している宿泊先タイプのほんの一例でしかありません。<br><br>ホストに求められる詳しい条件は、安全、セキュリティ、信頼性に関するAirbnbコミュニティの基準、高評価レビュー獲得のポイントをまとめたホスピタリティの基準をチェックしてみましょう。 46 </p> 47 </div> 48 </li> 49 </div> 50 <div class="faq-content"> 51 <li> 52 <a href="#">予約前にゲストに求められる要件は？</a> 53 </li> 54 <li class="answer"> 55 <div class="modal"> 56 <i class="fas fa-times"></i> 57 <h4>予約前にゲストに求められる要件は？</h4> 58 <p>Airbnbではご予約のみなさまに事前にいくつかの個人情報の入力をお願いしています。 59 ゲストは、予約をリクエストする前に必要事項をすべて記入しなければなりません。 60 これはホストが宿泊者の情報と連絡先を確認するためのものです。<br><br>Airbnbでは、ゲストに下記のような情報のご提出をお願いしています。 • 61 氏名 • メールアドレス • 62 認証済みの電話番号 • 自己紹介メッセージ • ハウスルールへの同意 • 63 お支払い情報<br><br>ゲストにはプロフィール写真の公開も推奨していますが、これは必須というわけではありません。 64 さらにホストは、宿泊予約の前にAirbnbに身分証明書を提示するようゲストに求めることもできます。</p> 65 </div> 66 </li> 67 </div> 68 <div class="faq-content"> 69 <li> 70 <a href="#">お部屋の掲載料はいくら？</a> 71 </li> 72 <li class="answer"> 73 <div class="modal"> 74 <i class="fas fa-times"></i> 75 <h4>お部屋の掲載料はいくら？</h4> 76 <p>Airbnbは利用登録もお部屋の掲載も完全に無料です。<br><br>予約が入った時点で通常3%をホストのみなさまからAirbnbサービス料として申し受け、運営費に充てています。 77 </p> 78 </div> 79 </li> 80 </div> 81 </div> 82 <div class="answer-second col-md-6"> 83 <div class="faq-content"> 84 <li> 85 <a href="#">家財破損があった場合、どのような補償がありますか？</a> 86 </li> 87 <li class="answer"> 88 <div class="modal"> 89 <i class="fas fa-times"></i> 90 <h4>家財破損があった場合、どのような補償がありますか？</h4> 91 <p>「Airbnbホスト保証」とは、ゲストによる家財破損の被害総額が保証金を超える場合や保証金未設定の場合、ホストに最大$1,000,000までの補償をお支払いするプログラムのことです。<br><br>現金、有価証券、収集品、稀少価値のある芸術品、宝石、ペット、対人賠償責任は「Airbnbホスト保証」プログラムの適用対象外です。 92 ホストのみなさまには、自宅を貸し出す際に貴重品を安全な場所に保管または撤去するよう推奨しています。 93 また、摩耗や劣化が原因の破損も本プログラムの対象外となります。<br><br>「ホスト保証」の詳細は<a 94 href="http://airbnb.com/guarantee">http://airbnb.com/guarantee</a>でご確認いただけます 95 </p> 96 </div> 97 </li> 98 </div> 99 <div class="faq-content"> 100 <li> 101 <a href="#">リスティングの料金を選ぶには？</a> 102 </li> 103 <li class="answer"> 104 <div class="modal"> 105 <i class="fas fa-times"></i> 106 <h4>リスティングの料金を選ぶには？</h4> 107 <p>料金選びは100%ホストが決めることができます。 108 料金の目安が欲しい場合には、地元の街やエリアで類似のお部屋を検索して大体の市場相場をつかみましょう。<br><br>追加チャージ • 109 清掃料金：こちらは宿泊料金に含めてもいいですし、「料金設定」で清掃料金を別途請求してもOKです。 • 110 その他の諸費用：宿泊料金に含まれていない追加費用（レイトチェックイン、ペット同伴料金など）を請求する場合は、予約前に有料とゲストに事前通告したうえで、「問題解決センター」を通してセキュアな環境で支払いをリクエストしてください。 111 </p> 112 </div> 113 114 </li> 115 </div> 116 <div class="faq-content"> 117 <li> 118 <a href="#">料金設定の支援ツールはありますか？</a> 119 </li> 120 <li class="answer"> 121 <div class="modal"> 122 <i class="fas fa-times"></i> 123 <h4>料金設定の支援ツールはありますか？</h4> 124 <p>Airbnbのスマートプライシングを使うと、類似のお部屋の需要変動に合わせて料金を自動的に値上げしたり値下げしたりすることができます。<br><br>料金の最終決定権は常にホストにあるため、スマートプライシングはホストが事前に設定した料金範囲内で1泊あたりの料金を決めます。また、ホストがいつでも手動で変更することが可能です。<br><br>スマートプライシングは、リスティングのタイプ、所在地、シーズン、需要、その他の要因（地域のイベントなど）にもとづいて料金を決定します。 125 </p> 126 </div> 127 </li> 128 </div> 129 </div> 130 </ul> 131 </div> 132 </div> 133 </div> 134 </div> 135 136 137 <script src="script.js"></script> 138</body> 139 140</html>
CSS
1ul { 2 padding: 0; 3 margin: 0; 4} 5 6li{ 7list-style:none; 8} 9 10.answer-wrapper a{ 11 font-size: 18px; 12 color: rgb(11, 104, 73); 13 border-bottom: 1px solid rgb(228, 228, 228); 14 display: inline-block; 15 width: 100%; 16 padding: 24px 0; 17} 18 19.answer{ 20 position: fixed; 21 top: 0; 22 right: 0; 23 bottom: 0; 24 left: 0; 25 background-color: rgba(0, 0, 0, 0.6); 26 z-index: 100; 27 display: none; 28} 29 30 31.modal{ 32 background-color: #fff; 33 padding: 32px; 34 margin: auto; 35 width: 50%; 36 display: block; 37} 38 39.fas , .fa-times{ 40 font-size: 24px; 41 cursor: pointer; 42 font-weight: lighter; 43 margin: 20px 0; 44} 45 46.modal h4{ 47 font-size: 24px; 48 padding: 0 0 24px; 49 margin: 0; 50} 51 52.modal p{ 53 font-size: 16px; 54 padding: 16px 0; 55}
js
1$(function(){ 2 $('.faq-content').click(function(){ 3 $(this).find('.answer').fadeIn(); 4 }); 5 6 $('.close-modal').click(function(){ 7 $('.answer').fadeOut(); 8 }); 9});
回答1件
0
ベストアンサー
.faq-contentの中に.close-modalがあるから、.close-modalをクリックするということは.faq-contentも一緒にクリックしてしまうからです。
js
1 $('.close-modal').click(function(){ 2 $('.answer').fadeOut(); 3 return false; // これを追加で解消しませんか？ 4 });
投稿2020/03/14 07:11
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/14 08:57