クラスが無い時にjQueryで表示させているバーを非表示にしたい

前提・実現したいこと

jQuery初心者です。

グローバルメニューについて、現在のページにバー(下線)をつけ、尚且つ追従させ、
グローバルメニューに無いページではバー事態非表示にさせたいです。

「現在のページに.currentをつけるjQuery」と、「メニューにバーを追随させるjQuery」は
サイトで見つけたjQueryをコピペして少しいじって、うまくいっています。

ここからが問題なのですが、.currentが無い時(グローバルメニュー以外のページを開いてる場合.currentが無い状態)に、バーは非表示にしたいのですが、どこをどのように書けば良いですか？

よろしくお願いします。

発生している問題

.currentがつかないページではアンダーバーが左寄せで表示されてしまっている。→消したい

該当のソースコード

HTML
1
2    <nav class="nav">
3        <div id="g-nav">
4            <a href="index.html">HOME</a>
5            <a href="access.html">アクセス</a>
6            <a href="location.html">周辺環境</a>
7            <a href="plan.html">プラン</a>
8            <a href="facility.html">設備</a>
9            <a href="outline.html">物件概要</a>
10            <span></span>
11        </div>
12    </nav>

CSS
1#g-nav{
2	position: relative;
3	padding-right: 20px;
4	padding-top: 20px;
5}
6#g-nav a{
7	padding:10px;
8	text-decoration: none;
9	color: #0C0B08;
10}
11#g-nav span {
12	background: #D3CAC1;
13	height:3px;
14	display:block;
15	position:absolute;
16	width:50px;
17	left:0;
18}

jquery
1<script>
2$(function(){
3    $('#g-nav a').each(function(){
4        var $href = $(this).attr('href');
5        if(location.href.match($href)) {
6        $(this).addClass('current');
7        } else {
8        $(this).removeClass('current');
9        }
10    });
11});
12
13$(function() {
14    $('#g-nav span').css({ 
15        width: $('#g-nav .current').outerWidth(),
16        left: $('#g-nav .current').position().left 
17    });
18    $('#g-nav a').mouseover(function(){
19        $('#g-nav span').stop().animate({
20            width: $(this).outerWidth(),
21            left: $(this).position().left}
22        ,{ duration: 170, easing: 'linear', });
23    });
24});
25</script>

試したこと

考えたのは、#g-nav aに.currentが無かったら#g-nav spanを消せば良いのかな？
と思って、調べて下記のコードをjqueryのscriptの中に続けて書いてみましたが違ったようです・・・(そもそもjavascriptやjqueryの文法などが分からないため見当違いなことをしていたらすみません)

if ($("#g-nav a").not("current")) {
$('#g-nav span').hide();
}

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

azuapricot

2019/12/20 05:24

https://uxmilk.jp/45298 その要素が currentクラスをもっているかどうか判定するだけなきがします

kamoka

2019/12/20 05:34

回答ありがとうございます。すみません。。。判定する記事はいくつか見たのですが、よく分からず。。。下記の書き方で合っていますでしょうか？また、「ここは何を書けば良いでしょうか？」の部分は何を書けば良いのでしょうか？ $('#g-nav a').on('click', function () { if ($(this).hasClass('current')) { ここは何を書けば良いでしょうか？ } else { $('#g-nav span').hide(); } });

azuapricot

2019/12/20 05:38

持ってないときだけにしたいなら ! をつけて否定にすれば elseの処理はいらないです

azuapricot

2019/12/20 05:39

「「ここは何を書けば良いでしょうか？」の部分は何を書けば良いのでしょうか？」何を書けばいいのでしょうか？と言われても詳しい仕様はわからないので回答は以下のようにしかできません・currentクラスがついている時に行いたい処理を書く

kamoka

2019/12/20 06:10

なかなか解決せずすみません・・・ .on('click', function ということはボタンを押した時の処理ですよね？ URLに最初にアクセスしている時には何のボタンも押していないので、いきなりifから書いて文法的に大丈夫でしょうか？(教えていただいた「！」否定つけてみました。) if (!$(this).hasClass('current')) { $('#g-nav span').hide(); } もし文法があっていたのであれば、これでも現状動いておらず、他の部分の可能性もあるかもしれないですね・・・

azuapricot

2019/12/20 06:17 編集

初期画面表示の時にその処理を動かしたいのであれば、ifから書いて問題ありません。 $(function(){ 　　// 画面描画時にcurrentクラスを持っていなければ hide()する　　if (!$(this).hasClass('current')) { 　　　　$('#g-nav span').hide(); 　　} }); 「.on('click', function　ということはボタンを押した時の処理ですよね？」この onclickは一体どこのことを言っているのでしょうか・・・？

shinji709

2019/12/20 06:35

質問者さんに確認したいのですが、既存のコードのままで、グローバルメニューにあるページ以外のとき、 left: $('#g-nav .current').position().left あたりで Cannot read property 'left' of undefined" などのエラーがブラウザのコンソールに出ていないでしょうか？もし出ている場合はエラーメッセージを追記で貼り付けておいてくれませんか

kamoka

2019/12/20 07:04

azuapricotさん具体的なコードありがとうございます！消すことはできました！ありがとうございます。ですが・・・また別の問題に気づいてしまいました；；初期画面やcurrentクラスのないページだとバーが追従していませんでした＞＜一先ず質問していた事に関しては解決いたしましたので、ありがとうございました！ちなみに。。。onclickは、最初に送っていただいたURLの内容で応用しようとした時に疑問に思った事でした。紛らわしくてすみません。

kamoka

2019/12/20 07:10

shinji709さんほんとですね。。。何か出てます。エラーはこんな感じで書いてあります。バツのところ following-bar.js:24 Uncaught TypeError: Cannot read property 'left' of undefined at HTMLDocument.<anonymous> (following-bar.js:24) at j (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at Function.ready (jquery.min.js:2) at HTMLDocument.J (jquery.min.js:2) ビックリマークのところ A cookie associated with a cross-site resource at http://eloqua.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

shinji709

2019/12/20 07:28

ありがとうございます。コメント欄は見ない方もいるので、質問本文のほうにも編集で追記しておいていただけると助かります。回答の前提なので。

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

回答1件

ベストアンサー

まずエラー部分を修正します。グローバルメニューにあるページ以外のとき==.currentがないとき、ここでエラーが発生しそれ以降の処理が動きません。バーが追随しないのはそのためです。

JavaScript
1  // $('#g-nav span').css({ 
2  //   width: $('#g-nav .current').outerWidth(),
3  //   left: $('#g-nav .current').position().left 
4  // });
5  $('#g-nav .current').each(function() {
6    $('#g-nav span').css({ 
7        width: $(this).outerWidth(),
8        left: $(this).position().left 
9    });
10  });
11

そしてメインの質問に対する回答ですが、leftの初期値をビューポートの遥か左に設定しておくのが簡単だと思います。

CSS
1#g-nav span {
2    background: #D3CAC1;
3    height:3pxa;
4    display: block;
5    position:absolute;
6    width:50px;
7    /* left:0; */
8    left:-10000px;
9}