
自己解決できず、こちらで質問させてください。
どうぞよろしくお願いします。
社内サイトを作っています。
ブラウザ環境は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も見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
改行をしたいが、<br>と...
-
【JavaScript】検索がヒットし...
-
特定の条件のHTML要素を一括で...
-
レイヤーの上下関係
-
javascriptで複数の表示・非表...
-
JavaScriptでCSSの変更
-
jQueryで特定のcssプロパティの...
-
CSSで記述した数値が取得できない
-
Google マップ でKMLの情報が正...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
Excelシート上のマクロを登録し...
-
VBAでループ内で使う変数名を可...
-
Googleフォーム・複数人の申し...
-
入力済み、選択したセルに連動...
-
月度は何て読みますか?
-
エクセルVBAで、MsgBox やInput...
-
男性に対して、『女性への気遣...
-
CloseとDisposeの違い
-
VBAでCOPYを繰り返すと、処理が...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
折りたたみを全て開いて別ペー...
-
確認ダイアログを次からは表示...
-
javascriptで複数の表示・非表...
-
特定の条件のHTML要素を一括で...
-
改行をしたいが、<br>と...
-
CSSでreadonlyの機能はあり...
-
macかwinか判別しスタイルシー...
-
SITEINFOの書き方について
-
ブラウザの表示領域から高さを...
-
vml フォントの大きさ変更
-
フォームで「パスワード(確認...
-
【JavaScript】検索がヒットし...
-
タイプライタ風の文字を真ん中...
-
jqueryを使ったスムーススクロ...
-
jQueryのCSSで値に変数を使う方法
-
webサイトに動画をはりつけ、ク...
-
年月日時分を指定してCSSを切り...
-
時間帯によってclass名を変更し...
-
2回目以降のページロード時には...
-
ブログパーツをレスポンシブ化...
おすすめ情報