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

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

ただいまの
回答率

88.91%

クリック後の表示(下線)

受付中

回答 0

投稿 編集

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

yuta_bsn

score 7

ホバー時だけでなく、flow-itemTopをクリックした後もflow-itemTtlに下線を表示し続けたいのですが、良い案はありますか?
あればよろしくお願いします。

コードは以下の通りです。

        <!-- flow -->
        <section class="flow">
            <div class="flow-inner">
                <h2 class="flow-ttl"><i class="fas fa-laptop"></i>受講の流れ</h2>
                <div class="flow-box">
                    <ul class="flow-list">
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/skypeconsulting.png" alt="">
                                <h3 class="flow-itemTtl">Skypeで事前コンサル</h3> <!--ここです。-->
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">現在のスキルの状況、パソコンの環境説明、渡航での注意点を話します。</p>
                                <p class="flow-itemBold">簡単なテストあり</p>
                                <p class="flow-itemTxt">
                                    iSaraでは受講料を稼げることを保障しています。従って、事前コンサル時点で簡単なテストを実施し、場合によってはお断りをしております。
                                    (テストの内容はPCの基礎知識に関するテストですので、普段からパソコンを利用する方でしたら問題ありません。テストはもちろん無料ですので、まずはお問い合わせください。)
                                </p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/preworks.png" alt="">
                                <h3 class="flow-itemTtl">事前課題の提出</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">出発前の1ヶ月前に事前課題を送ります。</p>
                                <p class="flow-itemTxt">0から始めるプログラミング事前学習講座、環境構築の事前学習、jQueryの事前学習講座、Bootstrapの事前学習講座、PHP
                                    / Mysqlの事前講座</p>
                                <p class="flow-itemBold">課題は多いですが、ここで努力が必須です。プログラミングは高付加価値なスキルです。そのためには学習が必須です。
                                    回数無制限のチャットサポート付きですので、最初は努力してください。<br>
                                    また、参加者グループコミュニティも作成するので、横の繋がりでモチベーションを高めることもできます。</p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/flight.png" alt="">
                                <h3 class="flow-itemTtl">現地に渡航</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">到着日には空港でお出迎えし、初日のオリエンテーションを行います。
                                    滞在先は空港からすぐの出来たてシェアハウス。美味しいタイ料理などもご紹介します。</p>
                                <p class="flow-itemBold">iSaraは『ノマド』フリーランス養成講座です。
                                    楽しいノマド体験ができるよう、バンコクでの生活はこちらでサポートします。
                                </p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/personwithlight.png" alt="">
                                <h3 class="flow-itemTtl">実案件を通して学ぶ</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">現役フリーランスが抱える案件に加え、クラウドソーシングを使って実案件をこなします。</p>
                                <p class="flow-itemBold">案件獲得のためのメールの書き方や見積りの仕方など、
                                    他のプログラミングスクールでは教えてくれない実務スキルを学ぶことができます。</p>
                                <p class="flow-itemTxt">*現役フリーランスがサポートします。</p>
                            </div>
                        </li>
                        <li class="flow-item">
                            <div class="flow-itemTop">
                                <img src="assets/img/jobsupport.png" alt="">
                                <h3 class="flow-itemTtl">帰国後の仕事獲得サポート付き</h3>
                            </div>
                            <div class="flow-itemBottom">
                                <p class="flow-itemBold">経験年数の少ないフリーランスが高単価で継続的に仕事受注するコツ、それがチームを組むことです。</p>
                                <p class="flow-itemBold">iSaraではフリーランスコミュニティを形成し、帰国後のエンジニアでも継続的に稼げる仕組みを提供します。
                                    もちろん、個人で十分に稼げるようになった場合はいつでも脱退できますし、制限などは何もありません。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
// flow
.flow-inner {
  padding: 0 16px 60px;
  .flow-ttl {
    text-align: center;
    font-size: 1.8rem;
    line-height: 2.2;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin: 2em 0;
    i {
      font-size: 1.4rem;
    }
  }
}
.flow-item {
  background-color: #FDF5E0;
  border-radius: 3px;
  cursor: pointer;
  &:not(:last-of-type) {
    margin-bottom: 3px;
  }
  .flow-itemTop {
    display: flex;
    align-items: center;
    padding: 10px 13px;
    position: relative;
    &::after {
      content: "";
      width: 7px;
      height: 7px;
      border-bottom: 4px solid #000;
      border-right: 4px solid #000;
      transform: rotate(45deg);
      position: absolute;
      right: 20px;
    }
    img {
      width: 35px;
      margin-right: 13px;
    }
    .flow-itemTtl {
      font-weight: 600;
      font-size: 1.5rem;
      letter-spacing: 0.1em;
    }
    &.add-active {
      &::after {
        border-bottom: none;
        border-right: none;
        border-top: 4px solid #000;
        border-right: 4px solid #000;
        transform: translateY(-5px) rotate(-45deg);
      }
    }
  }
  .flow-itemBottom {
    padding: 0 13px 20px;
    display: none;
    &:nth-child(1) {
      padding: 13px 20px;
    }
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 10px;
    }
    .flow-itemBold {
      font-weight: 600;
      font-size: 1.2rem;
      line-height: 1.6;
      letter-spacing: 0.1em;
    }
  }
}
$(function () {
    // flow
    $('.flow-item').on('click', function(){
        $(this).find('.flow-itemBottom').stop().slideToggle(250);
        $(this).find('.flow-itemTop').toggleClass('add-active');
    });
    $('.flow-item').hover(
        function() {
            $(this).find('.flow-itemTtl').css('text-decoration', 'underline');
        },
        function() {
            $(this).find('.flow-itemTtl').css('text-decoration', 'none');
        }
    );
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • m.ts10806

    2020/07/05 20:54

    >クリックした後も
    これは「いつまで」ですか?
    初期状態は下線なし
    →ホバー時下線出現
    →その後は離しても下線出現
    →ページリロードしたら下線は?

    キャンセル

  • yuta_bsn

    2020/07/05 21:57

    その後は離しても下線出現で、このテキスト以外ならどこでもいいのでクリックすることで下線を消すようにしたいです。もちろんページリロードしたら下線は消したいです。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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