親子におすすめの新型プラネタリウムとは?

ネットでやり方を調べたのですが、ちゃんとした回答がないようなので質問します。

http://harapeko.wktk.so/blog/blog-web/js-blog-we …

要するに上記のリンクの内容を一つのページ内でやりたいだけなのです。

上部のナビのボタンを押すとずいーっとページ内リンクで下の方に飛んでその項目のアコーディオンメニューが開いて収納されていたコンテンツが出るというような。

上記のリンクの内容をそのまま同じページの中でリンク先だけ変えてやったのですが、うまくできません。飛び先が違うページに飛ぶなら大丈夫なのですが。

自分は初心者なので分かりやすく教えてください。お願いします。

A 回答 (1件)

やりたい事はこういうことですかね。


http://getbootstrap.com/javascript/#collapse-exa …
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qアコーディオンメニューをアンカーリンクで開く

アコーディオンメニューで困っています。
色々と調べているのですが、どうもうまく動きません。

■やりたい事
アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。

■現状

・アンカーリンク(A.html)--------------------
<a href="B.html#アンカー名">リンク</a>


・アコーディオン設置先(B.html)------------------
<div class="aaa" id="アンカー名">
<p class="title">
アコーディオンタイトル
</p>
<p class="bbb">
アコーディオンの内容表示
</p>
</div>

・js---------------------------------------

$(document).ready(function(){
$(".bbb").hide();
$(".title").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$(location.hash).next(".bbb").slideToggle("slow");
});
});


現状はこのような状態なのですが、アンカーでの動作をしてくれません。

分かる方いらっしゃいましたら、是非教えてください

アコーディオンメニューで困っています。
色々と調べているのですが、どうもうまく動きません。

■やりたい事
アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。

■現状

・アンカーリンク(A.html)--------------------
<a href="B.html#アンカー名">リンク</a>


・アコーディオン設置先(B.html)------------------
<div class="aaa" id="アンカー名">
<p class="title">
アコーディオ...続きを読む

Aベストアンサー

ざっと見ただけですが・・・


> $(location.hash).next(".bbb").slideToggle("slow");
が、クリックイベントの処理定義の中に書かれていますが、これだとクリックする度にこの処理が走ります。また、クリックしないとこの処理は実行されません。(初期設定として実行されない)
ご質問の内容からすれば、この処理は読込後1度だけ初期設定として実行されれば良いはずですので、クリック時のイベントハンドラからは外す必要があります。

次に、
> $(location.hash).next(".bbb")
ですが、location.hashはidに相当する文字列になると想像しますが、対象としたいクラスbbbの要素はこの兄弟要素ではなく子要素になっているのではないでしょうか?
それなので、nextではなくfindなどを用いて取得する必要があるでしょう。
 $(child, parent)~~
の書式で取得しても同様の結果が得られると思います。

以上を修正したとして、
> $(location.hash).next(".bbb").slideToggle("slow");
1回だけの処理なので、必ずしもToggleの必要はないでしょう。show(又はslideDown)などで良いと思われます。
また、クリック時の処理内容を見てみると、title要素にactiveのクラス設定/削除が行われていますが、最初の時にはこの処理はしなくても良いのでしょうか?
(Toggleで設定されているので、以降のクリック時に期待とは違う結果になる可能性がありそうです)

もし、必要な場合は処理を追加する必要がありますね。
同じことをする別の方法として、『該当するtitle部分をクリックしたことにする』という考え方もありそうです。
 $(location.hash).find(".title").click();
のようにしておくことで、実際の処理は設定したイベントハンドラに渡すという仕組みにしておくのが簡単かも知れません。
(イベントの処理内容がいろいろとある場合は、この方が効率的な記述になるでしょう。)

ざっと見ただけですが・・・


> $(location.hash).next(".bbb").slideToggle("slow");
が、クリックイベントの処理定義の中に書かれていますが、これだとクリックする度にこの処理が走ります。また、クリックしないとこの処理は実行されません。(初期設定として実行されない)
ご質問の内容からすれば、この処理は読込後1度だけ初期設定として実行されれば良いはずですので、クリック時のイベントハンドラからは外す必要があります。

次に、
> $(location.hash).next(".bbb")
ですが、location.hashはidに...続きを読む

Qアコーディオンで開かれたパネルの位置にスクロール

アコーディオン作成でぶつかってしまったので質問させてください。

下記サイトを参考にスマホサイトにアコーディオンを作成しました。
http://pops-web.com/main/html/demo-007.html


タブをクリックしたと同時に開かれているパネルの上部にスクロールさせたいのですが、
知識が貧しく苦戦しております。
理想は下記のURLのような動きにしたいと思っています。
http://lab.boy.jp/demo/accordion/index.html

どなたかお分かりの方がおられましたらご教授頂けないでしょうか。
宜しくお願いいたします。


<h3 class="trigger">ここにタイトル</h3>
<div class="content">
<div class="deta">ここに内容</div>
</div>

<h3 class="trigger">ここにタイトル</h3>
<div class="content">
<div class="deta">ここに内容</div>
</div>

</div>

//Accordion
(function($){

$(function(){

//オブジェクトを保存
var accordionItem=$('#accordion');
//一旦全部消す
accordionItem.find('.content').hide();

//active要素を指定して開く
var no=0;
accordionItem.find('.trigger').eq(no).addClass('active').next('.content').show();

//click-action
accordionItem.find('.trigger').click(function () {

//slide
$(this).next('.content').slideToggle('slow')
.siblings('div:visible').slideUp('slow');


//activeクラス切り替え
$(this).toggleClass('active');
$(this).siblings('.trigger').not($(this)).removeClass('active');


});

//hover-toggle
accordionItem.find('.trigger').hover(function () {

//toggle hoveredクラス
$(this).toggleClass('hovered');
return false;

});
});

})(jQuery);



「//activeクラス切り替え」の下に以下の2行を追加したのですが、
下の方のタブになるとスクロール位置が正しい位置にスクロールされませんでした。。
var scposi = $(".trigger.active").offset().top;
$('body,html').animate({ scrollTop: scposi });

アコーディオン作成でぶつかってしまったので質問させてください。

下記サイトを参考にスマホサイトにアコーディオンを作成しました。
http://pops-web.com/main/html/demo-007.html


タブをクリックしたと同時に開かれているパネルの上部にスクロールさせたいのですが、
知識が貧しく苦戦しております。
理想は下記のURLのような動きにしたいと思っています。
http://lab.boy.jp/demo/accordion/index.html

どなたかお分かりの方がおられましたらご教授頂けないでしょうか。
宜しくお願いいたします。


<h3 ...続きを読む

Aベストアンサー

ANo2です。 こんにちは。

>他ページからのアクセスで、指定したパネルを開いた状態にすることは可能でしょうか?
原理的には可能と思います。
考え方や方法は検索すればたくさん見つかると思いますが、ご提示のHTMLソースの場合、各H3.targetあるいはDIV.contentの要素に個別の識別子が設定されていないので、通常よく用いられている方法は使えないですね。
ソースを修正するか別の方法で行うかということになりそうです。


別の方法の案の一例として…
「location.hashで指定する内容はアコーディオンの順番を示す」というようなルールを決めて、#menu0、#menu1・・・などという指定の仕方にしておくなら、そこから0、1・・・部分を取得して、それに対応するh3要素をクリックしてあげればよくなります。
この処理をonload時に行うようにしておけば良いでしょう。
(hashの指定がなければ0を指定されたことにする)


スクリプトをOFFにしている閲覧者に対して、できるだけ機能を損なわないようにすることを考えるなら、通常のページ内リンクが効くように、HTML内に識別子を設けておくほうがよろしいかと思います。

ANo2です。 こんにちは。

>他ページからのアクセスで、指定したパネルを開いた状態にすることは可能でしょうか?
原理的には可能と思います。
考え方や方法は検索すればたくさん見つかると思いますが、ご提示のHTMLソースの場合、各H3.targetあるいはDIV.contentの要素に個別の識別子が設定されていないので、通常よく用いられている方法は使えないですね。
ソースを修正するか別の方法で行うかということになりそうです。


別の方法の案の一例として…
「location.hashで指定する内容はアコーディオンの順番を...続きを読む

Q「jQuery」アコーディオンメニューがうまく動きません

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodomo">
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
</ul>
</li>
</ul>


■希望する動き
普通のアコーディオンの動きで特殊なものでは無いと思うのですが、念のため。

・初期状態は<ul class="kodomo">が非表示。
・<li class="oya"><a href="A.html">リンクA</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
</ul>
・<li class="oya"><a href="B.html">リンクB</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
</ul>

.oyaである
<a href="A.html">リンクA</a><a href="B.html">リンクB</a>クリックの際の動きは下記のどちらでも構いません。
↓↓↓どちらでもいいです↓↓↓
「A.html、B.htmlに飛ぶ。同時にアコーディオンも開く」
「A.html、B.htmlには飛ばず、アコーディオンのみ開く」
※A.html、B.htmlにも同じアコーディオンナビゲーションを設置しています。

そもそもA.html、B.htmlリンクが邪魔なのかもしれませんが、CMSを使用しているため外すことができません。


【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});

※アコーディオンが開いた瞬間に閉じてしまいます。
ちなみに'li.oya a'→'li.oya'にすると.nextが効かなくなりアコーディオンが開かなくなります。


【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

※パターン1に「return false;」を追加しました。
アコーディオンを開閉できるようになりましたが、
ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>が効かなくなってしまいました。


[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});

※パターン3より「li.oya a」→「li.oya」
「.next」→「.find」に変更。
アコーディオンは開閉します。
ただ、ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>をクリックすると該当ページには飛ばず、アコーディオンが閉じてしまいます。

なんだか良くわからなくなってきてしまいました。
ちなみに他のJQuery記述はすべて削除の上、確認、
全体はjQuery(function(){ });で囲っています。

ごくごく初歩的な部分でつまづいているのだとは思いますが、
何卒賢者のお力を。

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodom...続きを読む

Aベストアンサー

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応にはタグの変更が必要(TARGET="_blank")を入れるなど。
※'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
next('ul.kodomo')が見つけられない

【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});
'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
アコーディオンの子要素のaタグにもクリックイベントが付加されていため。
※'li.oya a'→'li.oya > a'にすると「li.oyaの子のa」に限定されるので希望している動きになります。

[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});
これは'li.oya'のタグがクリックされた時(子孫の要素も含む)
'li.oya'の子孫から'ul.kodomo'を探し出し、slideToggleを行い、
return falseする(ページ移動をキャンセル)
という処理になっています。

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

QjQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
elementVal.toggle("fast");
});
});
});
</script>

◆HTML◆
<div id="simpleAccordion">
 <h1>画像の箇所</h1>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
 <h2><a href="#">クリックする箇所</a></h2>
 <div>クリックされると開く箇所</div>
</div>

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか?
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div"...続きを読む

Aベストアンサー

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら、自分以外を閉じるようにする必要あり)


ついでにちょっとだけコンパクトにして、不用のiを削除すれば

$(function() {
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function() {
$(this).click(function() {
$("#simpleAccordion div").hide();
$(this).next("div").toggle("fast");
});
});
});

#1です。

最初の1行目で、サブメニューを閉じて(=非表示にする)いるので、それをコピペすればよいだけでは?
自作ではなかったのかな?

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
(これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら...続きを読む

Qタブで開いてさらにタブ内をアンカーリンクで移動させたい

イメージマップを作成しています。
<area>タグをクリックすると他ページに移動ではなく、map下に.tabContentsの#place1が表示されるようになっています。
これにさらにタブ内で指定の場所にアンカーリンクで移動させたくてそちらの方法を探しています。
areaタグに他ページにダイレクトリンクをつける例はいくつかあったのですが、同一ページ内のタブにアンカーリンクで移動させる例は見当たらなく、どのようにしたらいいか困っています。
どうかご教授願います。

jsはareaを押すと内容が開くことだけ記述しています。

------------html------------

<div id="tab-area">
<img src="./img_add/place/imagemap_on.png" alt="" usemap="#shape1" id="shape1">
<map name="shape1">
<area shape="rect" coords="630,408,710,441" name="#place1" alt="東京" href="#TK">
<area shape="rect" coords="630,441,710,472" name="#place1" alt="神奈川" href="#KN">
<area shape="rect" coords="630,472,710,504" name="#place1" alt="埼玉" href="#ST">
<area shape="rect" coords="630,504,710,537" name="#place1" alt="千葉" href="#CB">
</map>
<div class="tabContents">
<div id="place1">
<h4 id="TK">東京</h4>
<div class="comment">...</div>
<h4 id="KN">神奈川</h4>
<div class="comment">...</div>
<h4 id="ST">埼玉</h4>
<div class="comment">...</div>
<h4 id="CB">千葉</h4>
<div class="comment">...</div>
</div>
</div>
</div>


------------js------------

$(function() {
$(document).on('click', '#tab-area area', function() {

$('#tab-area .tabContents > div').hide();
$($(this).attr('name')).show();

$('#tab-area area').removeClass('current');
$(this).addClass('current');

return false;
});


});

イメージマップを作成しています。
<area>タグをクリックすると他ページに移動ではなく、map下に.tabContentsの#place1が表示されるようになっています。
これにさらにタブ内で指定の場所にアンカーリンクで移動させたくてそちらの方法を探しています。
areaタグに他ページにダイレクトリンクをつける例はいくつかあったのですが、同一ページ内のタブにアンカーリンクで移動させる例は見当たらなく、どのようにしたらいいか困っています。
どうかご教授願います。

jsはareaを押すと内容が開くことだけ記述...続きを読む

Aベストアンサー

「30代・女性」ではありませんけれど・・・


え~~っと・・・
<div id="place1">~~</div>の部分が一つのタブを構成していて、これが複数存在するというふうになっているのでしょうか?
マップもそれに応じてname="#place2"やname="#place3"のものがあって、タブを表示し分けているということなのかな?

いずれにしろ、<area>タグのhref属性はページ内ジャンプでも機能するはずですので、これを生かしてあげればご希望のようになると思うのですが。
ということで、機能をキャンセルをしている
 return false;
をやめれば動作しませんか?

上記がうまくいかない場合は、area要素のhref属性を取得して、そのidを持つ要素に対して scrollIntoView() でも動作すると思います。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

QjQuery タブメニューへのダイレクトリンクの仕方を教えてください。

jQuery UI タブ

http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm

を参考にタブメニューを制作しているのですが、
同ページ及び、他ページから各タブメニューへ
ダイレクトにリンクすることはできるのでしょうか。

ただ、ここで
http://allabout.co.jp/internet/javascript/closeup/CU20071220A/index2.htm#tab2-3
とリンク先を指定すると「ソース」というところに
ダイレクトにリンクするのですが、
ボタン等で指定するとうまくリンクしません。。。。。


方法があれば教えてください。
よろしくお願いします。

Aベストアンサー

#1、2です。 ちょっと時間がとれましたので…

配布元のデモページ(↓)の例でいけば、最初のセッティングが
http://docs.jquery.com/UI/Tabs

 $("#tabs").tabs();

となっているのを

 var pn = location.search.match(/(\?|&)tab=(\d+)(&|\b)/)?RegExp.$2:'0';
 $("#tabs").tabs().tabs('select', parseInt(pn));

に変えてあげて、リンク元のURL指定を
 href="xxx.html?tab=1"
のようにしてあげれば、ご希望のようにできると思います。
(上例では2番目のタブが開いた状態になる)←タブ番号は最初が0

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

QjQueryのアコーディオンメニュー 開閉の制御

jQueryのアコーディオンメニュー 開閉の制御

こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして
(http://triplexxx.jp/archives/150)
アコーディオンメニューを設置しました。

ページ遷移後でも、常に一番目のメニューが開いている状態なので、
選択しているページのメニューだけを開いている状態にしたいのですが
どの部分を変更したらよいでしょうか?

javascriptの
if(index > 0) $this.next().hide();
の部分が開閉の指示をしている箇所かなと思うのですが
新しいコードを書ける知識がないので、教えてください。
よろしくお願いします。

html
----------------------
<ul class="acc">
<li><a href="1">category1</a>
<ul class="fxmn">
<li><a href="11">menu 1-1</a></li>
<li><a href="12">menu 1-2</a></li>
<li><a href="13">menu 1-3</a></li>
</ul>
</li>
<li><a href="2">category2</a>
<ul class="fxmn">
<li><a href="21">menu 2-1</a></li>
<li><a href="22">menu 2-2</a></li>
<li><a href="23">menu 2-3</a></li>
<li><a href="24">menu 2-4</a></li>
</ul>
</li>
<li><a href="3">category3</a>
<ul class="fxmn">
<li><a href="31">menu 3-1</a></li>
<li><a href="32">menu 3-2</a></li>
<li><a href="33">menu 3-3</a></li>
<li><a href="34">menu 3-4</a></li>
<li><a href="35">menu 3-5</a></li>
</ul>
</li>
</ul>
----------------------

css
----------------------
ul.acc, ul.acc li ul {
margin: 0;
padding: 0;
list-style: none;
}

ul.acc a{
display: block;
height: 30px;
line-height: 30px;
color: #feffff;
}

ul.acc {
background-color: #185AAC;
}

ul.acc li ul {
background-color: #A6B5E2;
}
----------------------

javascript
----------------------
var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0) $this.next().hide();

$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
j$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);
});
});
});
});
----------------------

jQueryのアコーディオンメニュー 開閉の制御

こちらの「jQueryでアコーディオンメニューを作成する」の記事を参考にして
(http://triplexxx.jp/archives/150)
アコーディオンメニューを設置しました。

ページ遷移後でも、常に一番目のメニューが開いている状態なので、
選択しているページのメニューだけを開いている状態にしたいのですが
どの部分を変更したらよいでしょうか?

javascriptの
if(index > 0) $this.next().hide();
の部分が開閉の指示をしている箇所かなと思うのですが
新しいコードを書ける...続きを読む

Aベストアンサー

未検証ですが…

n番目のカテゴリだけ開いておきたいのであれば、当該部分を
 if (index != n) $this.next().hide();
などとしておけば、初期状態はn番目(0スタート)だけが開いたものとなります。

ただし、ページ遷移時にこれが実行できるようにnを受け渡してあげなければなりません。
その方法として
 1)呼び出されたページ側にnを記載しておく(フレームなどを使用していない条件)
 2)リンク時にロケーション・ハッシュ(/ccc.htmlI#XYZ の#XYZの部分)を利用して受け渡す
 3)クッキーを利用して受け渡す。
などが考えられますが、1)が一番簡単かと思われます。

Qtableにul,または,olを入れられますか?

<table>
 <tbody>
  <th>くだもの</th>
   <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
   …etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか?

Aベストアンサー

きちんとネストされていれば構いません。
ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
 <thead>
  <tr><th>くだもの</th></tr>
 </thead>
 <tbody>
   <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
   :
   :
 </tbody>
</table>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング