質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

fadeIn fadeOut が繰り返されてしまう

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 295

前提・実現したいこと

モーダルを✖ボタンで閉じるようにしたいのですが、ボタンをクリックしfadeOutした後すぐにfadeInしてしまいます。
fadeInさせる要素の中に✖ボタンの要素が含まれているからこうなるのだろうとは思いますが解決策がわかりません。
どなたかご教授いただければ幸いです。

該当のソースコード

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Airbnb</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
        integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>

    <div class="question">
        <div class="container">
            <div class="row">
                <h1 class="wrapper">よくある質問の答え</h1>
                <div class="answer-wrapper">
                    <ul>
                        <div class="answer-first col-md-6">
                            <div class="faq-content">
                                <li>
                                    <a href="#">Airbnbホストになれるのはどんな人?</a>
                                </li>
                                <li class="answer">
                                    <div class="modal">
                                        <i class="fas fa-times close-modal"></i>
                                        <h4>Airbnbホストになれるのはどんな人?</h4>
                                        <p>一部の地域を除き、Airbnbでホスティングを始めるのはとても簡単です。リスティングの作成および掲載もすべて無料。
                                            マンションやアパート、一軒家のまるまる貸切から個室、ツリーハウス、お城などはAirbnbで掲載している宿泊先タイプのほんの一例でしかありません。<br><br>ホストに求められる詳しい条件は、安全、セキュリティ、信頼性に関するAirbnbコミュニティの基準、高評価レビュー獲得のポイントをまとめたホスピタリティの基準をチェックしてみましょう。
                                        </p>
                                    </div>
                                </li>
                            </div>
                            <div class="faq-content">
                                <li>
                                    <a href="#">予約前にゲストに求められる要件は?</a>
                                </li>
                                <li class="answer">
                                    <div class="modal">
                                        <i class="fas fa-times"></i>
                                        <h4>予約前にゲストに求められる要件は?</h4>
                                        <p>Airbnbではご予約のみなさまに事前にいくつかの個人情報の入力をお願いしています。
                                            ゲストは、予約をリクエストする前に必要事項をすべて記入しなければなりません。
                                            これはホストが宿泊者の情報と連絡先を確認するためのものです。<br><br>Airbnbでは、ゲストに下記のような情報のご提出をお願いしています。 •
                                            氏名 • メールアドレス •
                                            認証済みの電話番号 • 自己紹介メッセージ • ハウスルールへの同意 •
                                            お支払い情報<br><br>ゲストにはプロフィール写真の公開も推奨していますが、これは必須というわけではありません。
                                            さらにホストは、宿泊予約の前にAirbnbに身分証明書を提示するようゲストに求めることもできます。</p>
                                    </div>
                                </li>
                            </div>
                            <div class="faq-content">
                                <li>
                                    <a href="#">お部屋の掲載料はいくら?</a>
                                </li>
                                <li class="answer">
                                    <div class="modal">
                                        <i class="fas fa-times"></i>
                                        <h4>お部屋の掲載料はいくら?</h4>
                                        <p>Airbnbは利用登録もお部屋の掲載も完全に無料です。<br><br>予約が入った時点で通常3%をホストのみなさまからAirbnbサービス料として申し受け、運営費に充てています。
                                        </p>
                                    </div>
                                </li>
                            </div>
                        </div>
                        <div class="answer-second col-md-6">
                            <div class="faq-content">
                                <li>
                                    <a href="#">家財破損があった場合、どのような補償がありますか?</a>
                                </li>
                                <li class="answer">
                                    <div class="modal">
                                        <i class="fas fa-times"></i>
                                        <h4>家財破損があった場合、どのような補償がありますか?</h4>
                                        <p>「Airbnbホスト保証」とは、ゲストによる家財破損の被害総額が保証金を超える場合や保証金未設定の場合、ホストに最大$1,000,000までの補償をお支払いするプログラムのことです。<br><br>現金、有価証券、収集品、稀少価値のある芸術品、宝石、ペット、対人賠償責任は「Airbnbホスト保証」プログラムの適用対象外です。
                                            ホストのみなさまには、自宅を貸し出す際に貴重品を安全な場所に保管または撤去するよう推奨しています。
                                            また、摩耗や劣化が原因の破損も本プログラムの対象外となります。<br><br>「ホスト保証」の詳細は<a
                                                href="http://airbnb.com/guarantee">http://airbnb.com/guarantee</a>でご確認いただけます
                                        </p>
                                    </div>
                                </li>
                            </div>
                            <div class="faq-content">
                                <li>
                                    <a href="#">リスティングの料金を選ぶには?</a>
                                </li>
                                <li class="answer">
                                    <div class="modal">
                                        <i class="fas fa-times"></i>
                                        <h4>リスティングの料金を選ぶには?</h4>
                                        <p>料金選びは100%ホストが決めることができます。
                                            料金の目安が欲しい場合には、地元の街やエリアで類似のお部屋を検索して大体の市場相場をつかみましょう。<br><br>追加チャージ •
                                            清掃料金:こちらは宿泊料金に含めてもいいですし、「料金設定」で清掃料金を別途請求してもOKです。 •
                                            その他の諸費用:宿泊料金に含まれていない追加費用(レイトチェックイン、ペット同伴料金など)を請求する場合は、予約前に有料とゲストに事前通告したうえで、「問題解決センター」を通してセキュアな環境で支払いをリクエストしてください。
                                        </p>
                                    </div>

                                </li>
                            </div>
                            <div class="faq-content">
                                <li>
                                    <a href="#">料金設定の支援ツールはありますか?</a>
                                </li>
                                <li class="answer">
                                    <div class="modal">
                                        <i class="fas fa-times"></i>
                                        <h4>料金設定の支援ツールはありますか?</h4>
                                        <p>Airbnbのスマートプライシングを使うと、類似のお部屋の需要変動に合わせて料金を自動的に値上げしたり値下げしたりすることができます。<br><br>料金の最終決定権は常にホストにあるため、スマートプライシングはホストが事前に設定した料金範囲内で1泊あたりの料金を決めます。また、ホストがいつでも手動で変更することが可能です。<br><br>スマートプライシングは、リスティングのタイプ、所在地、シーズン、需要、その他の要因(地域のイベントなど)にもとづいて料金を決定します。
                                        </p>
                                    </div>
                                </li>
                            </div>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <script src="script.js"></script>
</body>

</html>
ul {
    padding: 0;
    margin: 0;
}

li{
list-style:none;
}

.answer-wrapper a{
    font-size: 18px;
    color: rgb(11, 104, 73);
    border-bottom: 1px solid rgb(228, 228, 228);
    display: inline-block;
    width: 100%;
    padding: 24px 0;
}

.answer{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100;
    display: none;
}


.modal{
    background-color: #fff;
    padding: 32px;
    margin: auto;
    width: 50%;
    display: block;
}

.fas , .fa-times{
    font-size: 24px;
    cursor: pointer;
    font-weight: lighter;
    margin: 20px 0;
}

.modal h4{
    font-size: 24px;
    padding: 0 0 24px;
    margin: 0;
}

.modal p{
    font-size: 16px;
    padding: 16px 0;
}
$(function(){
    $('.faq-content').click(function(){
        $(this).find('.answer').fadeIn();
    });

    $('.close-modal').click(function(){
        $('.answer').fadeOut();
    });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

.faq-contentの中に.close-modalがあるから、.close-modalをクリックするということは.faq-contentも一緒にクリックしてしまうからです。

    $('.close-modal').click(function(){
        $('.answer').fadeOut();
        return false; // これを追加で解消しませんか?
    });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/03/14 17:57

    解決しました。
    ありがとうございました。m(__)m

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る