自己解決できず、こちらで質問させてください。
どうぞよろしくお願いします。
社内サイトを作っています。
ブラウザ環境はIE8です。
toggleで項目ごとに展開・折りたたみの設定をしているページがあります。
初期値はdisplay:none;を指定しています。
ページ内に設定しているリンク(折りたたみ箇所ではない)をクリックした際
別ウインドウを開くようにしているのですが
その別ウインドウには、toggle設定がされているページ(a.html)を
iframe内に表示させたいのです。
別ウインドウを開いた時に、a.htmlの折りたたまれている個所を全て展開して表示させる事は
できますでしょうか?
ご存知の方、アドバイス頂けないでしょうか。
<iframeに入れるページ(a.html)>
<script>
$(function(){
$("#list li div:nth-child(1)").addClass("title");
$("#list li div:nth-child(2)").addClass("content");
$(".h4").click(function(){
$(this).next().toggle(300);
});
});
</script>
<ul id="list">
<li>
<h4 id="title">タイトル1</h4>
<div id ="content" style="display:none;">
<p>
あああああああああああああああああああああああ
</p>
</div>
</li>
・
・
・
・
</ul>
No.2ベストアンサー
- 回答日時:
上記のページの方法は使えないですか?
htmlのh4にあらかじめクラスをつけておいて(<h4 class="trigger">とか)、それに対してクリックイベントをつける。
上記ページの方法で、
$('iframe').contents().find('h4.trigger')で、以下を.removeClassとかに変えて、クリックイベントをつけたh4からクラスをとってしまう。
同じ方法でdisplay:noneにしたところを.findで取得して、.show()で表示させる。
これでアコーディオンは解除されるのではないでしょうか。
試してないのでなんともいえませんが。
あと、わざわざiframeを使うよりは.load()でhtmlだけ呼び出したほうがきれいに作れそうな気がしますが。
cssは新たに必要かもですが。
http://semooh.jp/jquery/api/ajax/load/+url,+data …
書き込みありがとうございます!
貼っていただいたURLのサイトもみて
試してみましたが、うまく出ませんでした・・。
私の技量の問題も多分にあると思います。
あと、捕捉で書いていただいたiframe使わなくても・・というアドバイス、確かにそうですよね。。
ただ、今の私のスキルではすぐに取り入れることは
難しいかもしれないです・・↓
情報を色々と頂き、ありがとうございました!
No.1
- 回答日時:
方法はいろいろあるかと思いますが・・・
ひとつのアイデアとして、
a.html を読み込めば現状の通り。
a.html?hoge=open を読み込めば初期設定で開く。
のようにしておいて、iframeの時は<iframe src="a.html?hoge=open">などとするとか。
?hoge=openの部分は、location.searchで取得可能です。
書き込みありがとうございます!
私の知識が乏しいので
教えていただいた方法を、どのように応用したらいいのか
まずはそこから考えてみます。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSでreadonlyの機能はあり...
-
時間帯によってclass名を変更し...
-
JSライブラリ、DojoのEditorの...
-
JspにIf条件を追加したいのです...
-
確認ダイアログを次からは表示...
-
【CSS javascript】ブラウザ依...
-
開閉式をページ内の通常のHTML...
-
javascriptでの(-)ハイフンの処...
-
折りたたみを全て開いて別ペー...
-
改行をしたいが、<br>と...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
CloseとDisposeの違い
-
Excelシート上のマクロを登録し...
-
VBA エンターキーでイベントに...
-
「PC Helpsoft Driver Updated...
-
UMLでの例外処理
-
DoEventsがやはり分からない
-
switch の範囲指定
-
VBAでループ内で使う変数名を可...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
Q&A掲示板の入力フォームに文字...
-
JavascriptのHTMLクラス表示に...
-
3重のクォーテーション
-
JavaScriptのinnerHTMLの挙動に...
-
特定の条件のHTML要素を一括で...
-
クリックすると、色が変わるよ...
-
折りたたみを全て開いて別ペー...
-
jqueryを使ったスムーススクロ...
-
jQuery 画面サイズにスライド画...
-
2回目以降のページロード時には...
-
jQueryのSlickで矢印アイコンが...
-
Bootstrap Javascriptでモーダル
-
JavaScriptのdiv.style属性の変...
-
javascriptとcssでフォントサイ...
-
フォームで「パスワード(確認...
-
macかwinか判別しスタイルシー...
-
javascript htmlの追記について
おすすめ情報