バージョン選択

フォーラム

メニュー

オンライン状況

93 人のユーザが現在オンラインです。 (79 人のユーザが フォーラム を参照しています。)
登録ユーザ: 1
ゲスト: 92
JOP もっと...

サイト内検索

質問 > フロント機能 > スマートフォンサイトのサブエリア表示・非表示を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サイトで使用したいです。

} else {
$(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png");
stateSub = 0
}

あてずっぽうですが。
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サイトで使用したいです。
これも、あてずっぽうですが、

<div id="sub_area" style="display: none;">
<div id="sub_area">

sub_areaが2つあることが、
何か影響していないのかな〜?
moment
投稿日時: 2014/8/12 6:59
対応状況: 解決済
常連
登録日: 2014/6/30
居住地:
投稿: 45
Re: スマートフォンサイトのサブエリア表示・非表示をPCサイトで使用したいです。
Sumida様、

できました。ご教授通りで見事に非表示いたしました。
ひとりではわかりませんでしたので大変助かりました。

ありがとうございます。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,294名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.