assignment Boards
JavaScriptの質問をしたり答えたりする掲示板
2019-01-29に作成
JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します！
質問は下記に沿って書いていただくと回答しやすくなります。
- 実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
- 実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
- 見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。
JavaScript初心者です。
サイトのパーツとしてPCサイズではhover時に中の要素を出して、スマホサイズではclick時に中の要素をアコーディオンメニューのように出すことを実装しようとしているのですが、
windowのresizeでwidthを取得していifの分岐、など試してみてもresize前のイベントが消えなかったり、挙動がバグったりして困っています。
現状は一度諦めて下記のように記述して、サイズ変更の都度リロードしている状態です。
下記の記述をresizeしても正しく動作するにはどうすれば良いでしょうか。
ご指導頂けましたら幸いです。
何卒宜しくお願い申し上げます。
function switchByWidth() {
if (window.matchMedia("(max-width: 767px)").matches) {
// スマホサイズ アコーディオンメニュー
$(function () {
$("#header__menu01").on("click", function () {
$(this).find("span").next().slideToggle(200);
});
});
} else if (window.matchMedia("(min-width:768px)").matches) {
// pcサイズホバーイベント
$("#header__menu01").hover(
function () {
//カーソルが重なった時
$(this).children(".flex-wrapper").addClass("open");
},
function () {
//カーソルが離れた時
$(this).children(".flex-wrapper").removeClass("open");
}
);
}
}
window.onload = switchByWidth;
window.onresize = switchByWidth;
JavaScript初心者です。
解決できずにつまってしまったため皆様のご指摘を頂けたら幸いです。
HTML、CSSにて画像がZ軸で重なった状態で、マウスホバーした時にspanタグで囲んでいる画像をdisplay=noneにして下の画像が出る仕様を行っています。
実際には以下のリストの中に同じclass名で複数liが入ります。
<ul class="img-cont">
<li class="hover-wrapper hover-wrapper1">
<span class="item-wrapper1">
<img src="#"></span>
<a href="#">
<img src="#"></a>
</li>
</ul>
以下のようにjQueryにて個別に実装して問題は無さそうなのですが、それぞれのli、spanのclass個数を取得して配列にし、それぞれにホバーイベントを実装するにはどのようにすれば良いでしょうか。
$('.hover-wrapper1').hover(function () {
$('.item-wrapper1').css('display', 'none');
}, function () {
$('.item-wrapper1').css('display', 'inline-block');
});
$('.hover-wrapper2').hover(function () {
$('.item-wrapper2').css('display', 'none');
}, function () {
$('.item-wrapper2').css('display', 'inline-block');
});
.....
初歩的な質問で申し訳ございませんが、何卒ご指導の程宜しくお願い申し上げます。