jQueryで擬似要素（::before,::afterなど）に変化を加える（風）！！

14044 ワード
haml 擬似要素 JavaScript jQuery CSS CSS テキストリンク

概要

jQueryで「擬似要素に変化を加えるのってどうやるんだろう」、「そもそも擬似要素って要素として取得できるのかな〜」と少々苦戦したため、備忘録として残します。
世間はクリスマスですが、Qiita2投稿目にトライしてみるので、温かい目で見てくださると嬉しいです

まずは、デモ動画をご覧下さい！！

非常に細かい点ですが、CategoryとColorの右端に▲があり、イベント発火時（mouseover)、▼になっております。
この▲と▼が擬似要素::afterです。
変化が加わり、向きが変わっているように見えますが、実際は別のclassを作成し、イベントの発火に伴いclassの入れ替えをしているというものです。

::before, ::afterなどの擬似要素はDOM要素では無いため、JavaScriptで要素の取得や、変化を与えることが出来ないためです。
では、順を追ってご説明します。

※そもそも擬似要素って？という方は以下のリンクを参考にしてみてください
https://saruwakakun.com/html-css/basic/before-after

1.Haml, CSS

left-bar.html.haml
.left-header
  .left-header__lists 
    %ul.nav
      %li
        .select Category　※ここにカーソルが乗るとイベント発火
        %ul#option 
          %li
            = link_to  outer_items_path do
              = fa_icon "square-o"
              Outer
          %li
            = link_to tops_items_path do
              = fa_icon "square-o"
              Tops
          %li
            = link_to bottoms_items_path do
              = fa_icon "square-o"
              Bottoms
          %li
            = link_to shoes_items_path do
              = fa_icon "square-o"
              Shoes
          %li
            = link_to goods_items_path do
              = fa_icon "square-o"
              Goods
left-bar.css
.left-header{
  width: 250px;
  height: 650px;
  padding: 40px 30px 0 70px;
  position: relative;
  &__lists{
    width: 120px;
    height: 400px;
  }
  .nav {
    margin-bottom: 30px;
    position: relative;
    cursor: pointer;
  }
  .select{
    color: $black;
    font-family: $main-font;
    @include border-line;
    font-size: X-large;
    font-weight: bold;
  }
  #option{
    text-decoration: none;
    list-style: none;
    font-size: large;
    display: none;
    font-family: $main-font;
    li{
      a{
        color: $black;
        font-size: 21px;
      }
      .fa{
        color: $black;
      }
    }
    }
  }　今回のポイントはここです！！⇩
  .select:after{
    position: absolute;
    content: "▼";
    font-size: 12px;
    right: 0;
    bottom: 1px;
    color: #9a8478;
    }
  .select_a:after{
    position: absolute;
    content: "▲";
    font-size: 12px;
    right: 0;
    bottom: 1px;
    color: #9a8478;
  }

selectの擬似要素::afterを画像のように２種類用意しておくことがポイントです！
contenの中身だけを変更します！！

2.jQuery

以下jQueryのコードです。(jQueryが使用可能な環境になっているという前提で話を進めます。)

left-bar.js
$(function(){
    $(document).on("turbolinks:load", function(){
        var nav = $(".nav");
        $("li", nav)
        .mouseover(function(e){
            $("ul",this).stop().slideDown("fast"); ①
            var select = $(this).children(".select")[0];②
            $(select).toggleClass("select_a");③
        })
        .mouseout(function(e){
            $("ul", this).stop().slideUp("fast");
            var select = $(this).children(".select")[0];
            $(select).toggleClass("select_a");
        });
    })
})

①.navの%li、つまり.selectにマウスカーソルが乗った時、子要素の%ul#optionをスライドによって表示させます。

②mouseoverされた.selectのDOM要素を取得し、変数化します。
console.logで下記画像の様に取得出来ていればOKです！

③変数化された.selectの擬似要素を.toggleClassで切り替えて実装完了です!

mouseoutの時は、逆の動きをするのでslideDownとslideUpを書き換えるだけでOKです！

まとめ

擬似要素には直接変化を与える事が出来ないので、classを切り替える事で変化を加える(風)に実装しました！
font-awesomeなどを用いていれば、もう少し簡単に実装出来たのかなとも思います。。。
最後まで読んで下さりありがとうございました

参考