質問 > フロント機能 > スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。 |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
moment |
投稿日時: 2014/8/9 5:07
対応状況: −−−
|
常連 登録日: 2014/6/30 居住地: 投稿: 45 |
スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。 お世話になっております。どうか教えてくださいませんでしょうか。
スマートフォンサイトの詳細ページで使用されている、サブエリア表示・非表示の機能をPCのブロックで使用し、あるボタンをクリックしたらある情報を表示するようにしたいと思い、以下の記述をスマートフォンからPC用のsite_frame.tplで使用し、 <script>//<![CDATA[ // 表示非表示切り替え function lfDispSwitch(id){ var obj = document.getElementById(id); if (obj.style.display == 'none') { obj.style.display = ''; } else { obj.style.display = 'none'; } } //サブエリアの表示/非表示 var speed = 500; var stateSub = 0; function fnSubToggle(areaEl, imgEl) { areaEl.slideToggle(speed); if (stateSub == 0) { $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_plus.png"); stateSub = 1; } else { $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png"); stateSub = 0 } } //]]></script> Pcのテンプレートではスマートフォンサイトテンプレートの相当箇所を以下の用にそのまま使用しました。 <span class="b_expand"><p onclick="fnSubToggle($('#sub_area'), this);"> ボタン</p></span> <div id="sub_area" style="display: none;"> <div id="maintext6"> <ul id="topnavi3"> *********************** *********************** </ul> </div> </div> スマートフォンサイトでは勿論問題ないのが、PCサイトではボタンをクリックすると情報を表示しますが、ボタンを再度クリックすると情報を閉じるはずが、“閉じません”。 閉じる機能が動作していないようです。 何が問題かどなたかおしえていただけませんでしょうか。 EC-CUBE: 2.12.5 データベース: MySQL 5.0.6 WEBサーバ:apache2.2 OS:Linux PHP: PHP 5.2.1 |
sumida |
投稿日時: 2014/8/9 8:41
対応状況: −−−
|
仙人 登録日: 2013/2/10 居住地: 広島県呉市ときどき瀬戸内海 投稿: 641 |
Re: スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。
あてずっぽうですが。 stateSub = 0; 赤字の部分がないとか。 |
moment |
投稿日時: 2014/8/10 4:53
対応状況: −−−
|
常連 登録日: 2014/6/30 居住地: 投稿: 45 |
Re: スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。 Sumida様
お世話になっております。最初はpcでは機能しないのかなと思っていたのですが、sumida様からのアドバイスどおりに設定した上で、tplで以下の設定で元にもどるようになりました(情報を非表示にする)。 <span class="b_expand"><p onclick="fnSubToggle($('#sub_area'), this);"> ボタン</p></span> <div id="sub_area" style="display: none;"> <div id="sub_area"> <div class="subarea clearfix"> <div id="maintext6"> <ul id="topnavi3"> *********************** *********************** </ul> </div> </div> </div> </div> しかしながら、この設定はボタンをクリックすると、情報を表示する際に、ボタンの配下にある全てのもの(ブロック)もその表示した情報の下に配置してしまいます。 それをマウスオーバー(hover)の様に、ボタンの下にあるものを覆い隠すように表示したいと思い、cssで以下の設定にしたところ、“ボタンの下にあるものを覆い隠すように情報を表示する”ことはできたのですが、 #sub_area { position: absolute; /*--Important--*/ top: 40px; left: 0px; z-index: 99999; padding: 0px 0px 0px; float: right; } また最初の様に、再度ボタンをクリックしても情報を閉じなくなりました。(非表示にしません)。何かおわかりになりませんでしょうか。 |
sumida |
投稿日時: 2014/8/10 11:42
対応状況: −−−
|
仙人 登録日: 2013/2/10 居住地: 広島県呉市ときどき瀬戸内海 投稿: 641 |
Re: スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。 これも、あてずっぽうですが、
sub_areaが2つあることが、 何か影響していないのかな〜? |
moment |
投稿日時: 2014/8/12 6:59
対応状況: 解決済
|
常連 登録日: 2014/6/30 居住地: 投稿: 45 |
Re: スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。 Sumida様、
できました。ご教授通りで見事に非表示いたしました。 ひとりではわかりませんでしたので大変助かりました。 ありがとうございます。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |