ナビの一部をクリックしてもリンクのページが開きません。どう修正すればよいでしょうか？

-- 質問詳細 --
http://wonect.com/
上記サイトのスマホ表示（画面サイズ780px以下）のときのナビの「Sale」をクリックしてもリンク先のページが開きません。
※780px以上のときは「Sale」をクリックするとリンク先のページに移動できます。
どのように修正すればよいでしょうか？

-- 備考 --
・スマホ表示のときはナビのレイアウトがかわりクリックするとサブカテゴリが開く（PC表示のときはホバー時に開く）構成のため、スマホ独自の効果によりリンク先が開かない可能性が高いと思います
・上記サイトは、オープンソースのECサイト構築パッケージのMagentoを利用して制作しました。

-- やってみたこと --
リンクが機能する横幅780px以上のときに「Sale」に関連するタグに影響していそうなclassと同じにしたり、スマホ表示のときのみの固有のclassを削除したがうまくいきませんでした。

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

回答1件

ベストアンサー

なんか見たことがあるコードだなあ……

app.jsにクリックイベントが設定されていますね。

javascript
1    // =============================================
2    // Skip Links
3    // =============================================
4
5    var skipContents = $j('.skip-content');
6    var skipLinks = $j('.skip-link');
7
8    skipLinks.on('click', function (e) {
9        e.preventDefault();
10
11        var self = $j(this);
12        // Use the data-target-element attribute, if it exists. Fall back to href.
13        var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href');
14
15        // Get target element
16        var elem = $j(target);
17
18        // Check if stub is open
19        var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0;
20
21        // Hide all stubs
22        skipLinks.removeClass('skip-active');
23        skipContents.removeClass('skip-active');
24
25        // Toggle stubs
26        if (isSkipContentOpen) {
27            self.removeClass('skip-active');
28        } else {
29            self.addClass('skip-active');
30            elem.addClass('skip-active');
31        }
32    });
33

解決方法ですが、skipLinksに含まれないようにすればいいので、クラス属性からskip-linkを外せばいいと思います。

投稿2017/01/21 05:35

Lhankor_Mhy

総合スコア36104

h-o

2017/01/21 08:47

回答をいただき誠にありがとうございます。やってみます。

h-o

2017/01/23 00:17

回答をいただいたとおり、app.jsにクリックイベントに関係あるclassのskip-link,skip-contentを外して見ましたがやはりスマホ表示のときのSaleはクリックできませんでした。何か他に解決の糸口になるようなことがございましたらご教授いただけますでしょうか？

Lhankor_Mhy

2017/01/23 01:33

> app.jsにクリックイベントに関係あるclassのskip-link,skip-contentを外してこれは具体的に言うと、どういう変更を行ったのでしょうか。 PC表示の「Sale」とスマホ表示の「Sale」は別の要素だということはご理解いただいてますか？

h-o

2017/01/23 05:08

説明が不十分で申し訳ありません。＞これは具体的に言うと、どういう変更を行ったのでしょうか。スマホ表示時のヘッダーのclassの全てのskip-link,skip-contentをChromeのデベロッパーツールをつかって削除した状態にしました。＞PC表示の「Sale」とスマホ表示の「Sale」は別の要素だということはご理解いただいてますか？ PCとスマホで異なるナビのhtmlを切り替えて表示していると理解しています。

Lhankor_Mhy

2017/01/23 05:44

> Chromeのデベロッパーツールをつかって削除した状態にしました。なるほど。デベロッパーツールでクラス削除すると、既存のイベントリスナを捨てるかどうか、ちょっと分からないですね。あまり確認方法としてはよくない気がします。逆にDOMが差し替わるような変更なら全てのイベントリスナが破壊されるはずですし。

h-o

2017/01/24 00:55

度々の返信誠にありがとうございます。 >デベロッパーツールでクラス削除すると、既存のイベントリスナを捨てるかどうか、ちょっと分からないですね。デベロッパーツールで試すのではなく実際にsaleに設定されていたskip-linkを削除したところクリックできるようになりました。ありがとうございました。

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