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

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

ただいまの
回答率

88.63%

【jQuery】クリック時の要素の回転について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,524

unee

score 17

前提・実現したいこと

jQueryを使用してアコーディオンメニューを作成しております。

☆したいこと
<p>タグのついたタイトルまたは.closeをクリックしたら、
.arrowの「▲マーク(後で画像アイコンに差し替える可能性あり)」を180度半回転し閉じたい。
https://lab.sonicmoov.com/wp-content/uploads/demo/marizo/201507_accordion/#demo01

☆出来たこと
<p>タグのついたタイトルをクリックすると展開し、
<p>タグのついたタイトルと.closeをクリックで閉じます。
複数のタブが開くことはありません。

発生している問題・エラーメッセージ

いろいろ調べながらしてみましたが、
<p>タグのついたタイトルまたは.closeを連動させることが出来ませんでした。
また、今書いているコードと組み合わせる方法が分からないです。

HTML

<ul class="accordion">
    <li>
        <p class="ac arrow">アコーディオン1</p>
        <ul class="inner">
            <li class="content1">コンテンツ</li>
            <li class="content1">コンテンツ2</li>
            <li class="content1">コンテンツ3</li>
            <li><span class="close">閉じる</span></li>
        </ul>
    </li>
    <li>
        <p class="ac arrow">アコーディオン2</p>
        <ul class="inner">
            <li class="content1">コンテンツ</li>
            <li class="content1">コンテンツ2</li>
            <li class="content1">コンテンツ3</li>
            <li><span class="close">閉じる</span></li>
        </ul>
    </li>
    <li>
        <p class="ac arrow">アコーディオン3</p>
        <ul class="inner">
            <li class="content1">コンテンツ</li>
            <li class="content1">コンテンツ2</li>
            <li class="content1">コンテンツ3</li>
            <li><span class="close">閉じる</span></li>
        </ul>
    </li>
</ul>

jQuery

$(function(){
    $('.accordion p').click(function(){
        $(this).next('.accordion .inner').slideToggle();
        $('.accordion p').not($(this)).next('.accordion .inner').slideUp();
    });
    $('.close').click(function () {
        $(this).parents('.accordion .inner').slideUp();
    });
});

CSS

/*デザイン*/
ul{
list-style: none;
}
.accordion {
  text-align: center
    ;}
.accordion .inner {
  display: none;
  }
.accordion p{
  cursor: pointer; padding: 10px;
  }
.accordion p.ac{
  background: #ccc;
  }
.accordion .inner li{
  padding: 10px 0; 
  position: relative;
  }
.accordion .inner li .close{
  padding: 4px 5px ;
  background: #fff;
  border:1px solid #f0f0f0;
  border-radius: 10px;
  position:absolute;
  top:6px;
  right: 10px;
  font-size: 14px;
  cursor: pointer;
  }
.accordion .inner li.content1{
  background: #fff;
  }

/*三角 イロイロ試した痕跡*/
.arrow:after{
  content: "▼";
}
.arrow02{
  content: "▲";
}

試したこと

$(function(){
$('.accordion p','.close').click(function(){
$(this).toggleClass(“.arrow02”);
});
});

上記を新たに追加してみたりしておりました。
他参考にしたページ
https://jquery-jp.com/accordion/
https://www.jungleocean.com/demo/jquery-accordion/
https://lab.sonicmoov.com/wp-content/uploads/demo/marizo/201507_accordion/#demo01

どのような考え方をしたら実現できるのかご教示いただきたいです。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2019/03/17 19:43

    (質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • unee

    2019/03/17 19:45

    教えていただきありがとうございます!修正しました…!

    キャンセル

回答 1

checkベストアンサー

0

$(function(){
//  $('.accordion p','.close').click(function(){
//                   ↓ ひとまとめに、CSSのセレクタと同じように書く
    $('.accordion p, .close').click(function(){
//  $(this).toggleClass(“.arrow02”);
//                      ↓       ↓ 全角を半角に
    $(this).toggleClass(".arrow02");
    } );
} ); 

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/18 11:55 編集

    ありがとうございます!(何度もコメント編集し、申し訳ございません)

    jQuery
    $(function(){
    $('.accordion p, .close').click(function(){
    $(this).toggleClass('open');
    } );
    } );

    openというcssを作成しました。
    CSSに「.arrow:after」と開いている状態の「.arrow.open:after」を設定し、
    accordion pをクリックした際は思っていた通りの動作になりました。
    しかし、.closeにも.openが付与され、そちらは意図した動きではないです…。
    .closeをクリックした時accordion pに.付いているopenを削除したいのですが、どうしたら良いでしょうか。

    キャンセル

  • 2019/03/18 12:10

    連投すみません、上記項目解決しました!

    removeClassで指定し、解決しております。
    お騒がせいたしました。

    ありがとうございます。

    キャンセル

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

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

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