jQueryの記述がおかしいのだと思うのですが、わからない...(動作しない)

お世話になります。
jQueryを使ってサイトを作っています。
わからないところがあり、困っております。ぜひご教授ください。

現在のコード

    <header id="header">
      <div class="container-fluid">
        <div class="row">
          <div class="top col-12">
            <img src="img/logo.svg" class="">
            <div class="nav">
              <div class="nav-item">CONCEPT</div>
              <div class="nav-item">PRODUCTS</div>
              <div class="nav-item">NEWS</div>
              <div class="nav-item stores">STORES
                <ul>
                  <li><a href="" class="list">Shop List</a></li>
                  <li><a href="" class="list">Online Store</a></li>
                  <li><a href="" class="list">Amazon</a></li>
                </ul>
              </div><!--.nav-item stores>
            </div><!--.nav>
          </div><!--.top>
        </div><!--.row>
      </div><!--.container-fluid>
    </header>

.bg_white {
  background-color: #eeeeee;
  height: 201px;
}
header {

  .top {
    display: flex;
    width: 92%;
    margin: 0 auto;
    padding: 0;
    align-items: end;
    
  }
  img {
    width: 240px;
    height: auto;
    object-fit: contain;
  }


  .nav {
    margin: 0 6vw 0 auto;
    flex-wrap: nowrap;

    .nav-item {
      margin: 0px 21px;
      font-size: 17px;
      letter-spacing: 1px;
      transition: all .5s ease-in-out;
    }

    .stores {
      ul {
        display: none;
        position: absolute;
        width: 100%;
        padding-top: 40px;
        padding-bottom: 40px;
        text-align: left;
        background-color: #fff;

        li {
          float: none;
        }
        a {
          position: relative;
          display: inline-block;
          transition: .3s;
          font-size: 15px;
          margin: 5px 0;
        }
     }
   }
}

$(function(){


  $(".stores").hover(function(){


    $(this).children("ul").stop().slideToggle(300);

    $(this).parent(".nav").parent(".top").parent(".row").addClass(".bg_white");
  }); 
});

実現したいこと

①.storesをマウスホバーすると、子要素のulにslideToggleが発生し、かつ、
②.row　に　.bg_whiteクラスが付与される、という状態にしたいです。

現状、①の動作はできておりますが、②の動作がしない状態にあります。

わかりづらいところがあるかもしれませんが、よろしくお願いします。

退会済みユーザー

2021/02/18 15:16

htmlのclass属性に指定しているCSSコードを質問文に追記してください。見た目がさっぱり分かりません。あと、htmlのインデントがひどかったり閉じタグ忘れまくっているのも直してください。質問内容はマウスホバーなどのタグの範囲が重要な処理ですので、ここでミスしてしまうと意図したとおりに動かない可能性が上がるでしょう。

退会済みユーザー

2021/02/18 16:29

コメントくださり、また、ご指摘ありがとうございます。修正致しました。

plasticgrammer

2021/02/19 01:06

挙動に関係あるかどうかはわかりませんが、hoverで１関数を引き渡しているので「重なった時も離れた時も同じ関数が実行される」と思われます。

mari.rinn

2021/02/19 01:14

ここに書かれていませんが、jQueryの読み込みはどの位置にされてますか？ jsのコードよりも上に書かれてますか？

退会済みユーザー

2021/02/19 02:29

plasticgrammer 様おっしゃる通りで、①ホバーするとslideToggleが発生する、という記述では、ホバーするとslideToggleが発生し、マウスアウトで再度非表示になる、という挙動が確認できます。 ②も①と同じように、ホバーでクラスが付与され、アウトで外れるといった挙動が望ましいです。ご質問ありがとうございます。

退会済みユーザー

2021/02/19 02:33

mari.rinn 様読み込みは、 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src="js/script.js"></script> </body> </html> としており、記述はscript.jsにしております。試しに質問とは異なる記述をしてみたところ、動作の確認ができましたので、読み込みは問題ないものと思われます。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $(".stores").hover(function(){
3    $(this).children("ul").stop().slideToggle(300);
4    $(this).closest(".row").toggleClass("bg_white");
5  }).find("ul").hide(); 
6});