Q&A
しつもんはなんでしょうか。
<h5 class="sidrtitle">CATEGORY</h5> <!-- accordion --> <div class="acobottom"> <ul id="accordion" class="accordion"> <li> <div class="link1 submenu"><img src="sp/img/cate14.jpg" alt="NEW ARRIVAL"><a href="●●●0000000142/">新着アイテム<i class="fa fa-angle-right"></i></a></div> </li> <li> <div class="link1 submenu"><img src="sp/img/cate14.jpg" alt="NEW ARRIVAL"><a href="●●●0000000143/">再入荷アイテム<i class="fa fa-angle-right"></i></a></div> </li> <li> <div class="link"><img src="sp/img/cate14.jpg" alt="パンツ">パンツ<i class="fa fa-chevron-down"></i></div> <ul class="submenu2"> <li><a href="●●●0000000105/">すべてのパンツ<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000197/">テーパードパンツ<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000198/">ワイドパンツ<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000164/">クロップドパンツ<i class="fa fa-angle-right"></i></a></li> </ul> </li> <li> <div class="link"><img src="sp/img/cate14.jpg" alt="スカート">スカート<i class="fa fa-chevron-down"></i></div> <ul class="submenu2"> <li><a href="●●●0000000106/">すべてのスカート<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000153/">タイトスカート<i class="fa fa-angle-right"></i></a></li> </ul> </li> <li> <div class="link"><img src="sp/img/cate14.jpg" alt="アウター">アウター<i class="fa fa-chevron-down"></i></div> <ul class="submenu2"> <li><a href="●●●0000000103/">すべてのアウター<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000117/">カーディガン<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000169/">ブルゾン<i class="fa fa-angle-right"></i></a></li> <li><a href="#">   </a></li> </ul> </li> <li> <div class="link"><img src="sp/img/cate14.jpg" alt="バッグ">バッグ<i class="fa fa-chevron-down"></i></div> <ul class="submenu2"> <li><a href="●●●0000000238/">すべてのバッグ<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000242/">リュックサック<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000239/">トートバッグ<i class="fa fa-angle-right"></i></a></li> <li><a href="#">   </a></li> </ul> </li> <li> <div class="link1 submenu"><img src="sp/img/cate14.jpg" alt="グッズ"><a href="●●●0000000107/">グッズ<i class="fa fa-angle-right"></i></a></div> </li> <li> <div class="link1 submenu"><img src="sp/img/cate14.jpg" alt="マタニティ"><a href="●●●0000000202/">マタニティ<i class="fa fa-angle-right"></i></a></div> </li> <li> <div class="link"><img src="sp/img/cate14.jpg" alt="素材">素材<i class="fa fa-chevron-down"></i></div> <ul class="submenu2"> <li><a href="●●●0000000243/">ニット<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000181/">ポンチ<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000204/">ワッフル<i class="fa fa-angle-right"></i></a></li> <li><a href="#">   </a></li> </ul> </li> <li> <div class="link"><img src="sp/img/cate14.jpg" alt="アンドミー特集">アンドミー特集<i class="fa fa-chevron-down"></i></div> <ul class="submenu2"> <li><a href="●●●0000000223/">おうち時間<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000225/">ランキング<i class="fa fa-angle-right"></i></a></li> <li><a href="●●●0000000245/">ボトムス<i class="fa fa-angle-right"></i></a></li> <li><a href="#">   </a></li> </ul> </li> </ul> </div> <script> $(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; // Variables privadas var links = this.el.find('.link'); // Evento links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown) } Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu2 .submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false); }); </script> .accordion { width: 100%; max-width: 360px; margin: 0px 15px; background: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; list-style-type:none; } .accordion .link { cursor: pointer; display: block; padding: 20px 15px 10px 15px; color: #555; font-size: 12px; /* ラベルの文字サイズ */ font-weight: light; text-align: left; background: #fff; /* ラベルの背景色 */ display: flex; flex-wrap: wrap; /*--折り返しの指定--*/ border-bottom: 1px solid #AAAAAA; position: relative; -webkit-transition: all 0.24s ease; -o-transition: all 0.24s ease; transition: all 0.24s ease; } .accordion li:last-child .link { border-bottom: 1px solid #AAAAAA; } .accordion .link1 { cursor: pointer; padding: 20px 15px 10px 15px; color: #555; font-size: 12px; /* ラベルの文字サイズ */ font-weight: light; text-align: left; background: #fff; /* ラベルの背景色 */ display: flow-root; flex-wrap: nowrap; /*--折り返しの指定--*/ border-bottom: 1px solid #AAAAAA; position: relative; -webkit-appearance: none; -webkit-text-size-adjust: 100%; } .accordion li:last-child .link1 { border-bottom: 1px solid #AAAAAA; } .accordion li i { position: absolute; top: 27px; left: 12px; font-size: 18px; color: #595959; -webkit-transition: all 0.24s ease; -o-transition: all 0.24s ease; transition: all 0.24s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li a i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li.open .link { color: #333; } .accordion li.open i { background: #FFF; color: #606060; } .accordion li.open i.fa-chevron-down { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .accordion li img{ margin: -15px 10px -7px -6px; width:50px; height:50px; border-radius: 100px; /* 画像の角の丸み */ } .accordion li.default .submenu {display: flex;} /** * Submenu -----------------------------*/ .submenu { display: none; background: #fff; font-size: 14px; } .submenu li { border-bottom: 1px solid #e8e8e8; } .submenu a { display: block; text-decoration: none; color: #333; background: #fff; /* 開いた部分の背景色 */ font-size: 11px; margin: -30px -1px 5px 53px; } .submenu a:hover { background: #fff; } .submenu i.fa-angle-right { right: 0px; left: auto; top: -2px; font-size: 26px; font-weight: bold; background: #fff; color: #595959; } /** * submenu2 -----------------------------*/ .submenu2 { display: none; background: #fff; font-size: 14px; } .submenu2 li { width: 50%; float: left; border-bottom: 1px solid #e8e8e8; } .submenu2 a { display: block; text-decoration: none; color: #333; background: #f7f7f7; /* 開いた部分の背景色 */ font-size: 10px; padding: 20px; padding-left: 15px; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .submenu2 a:hover { background: #f7f7f7; } .submenu2 li i.fa-angle-right { right: 13px; top: 22px; left: auto; font-size: 16px; background: #f7f7f7; color: #309bff; } .acobottom { height: 100%; display: flex; } コード
アコーディオンメーミューにて、新着・再入荷・グッズ・マタニティ部分がiphone12だと表示されますがiphone6だと表示されません。表示させる方法を知りたいです。
アンドロイドの表示も確認できてます。
よろしくお願いいたします。
質問文を編集してそれを追記しましょう
意味不明ですぜ
Android端末、PCブラウザではどうでしょうか。
ただ、iPhone6は古いのでは
実機の話ですか？
Android端末、PCブラウザは表示されます。
古いです。実機です。
よろしくお願いいたします。
すみません。
Edgeも表示されません。
つまり、サブメニューがついてるやつは正常に表示されるけど、ついてないものは表示されないと言うことですかね？
あなたの回答
tips
プレビュー
