人に聞けない痔の悩み、これでスッキリ >>

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

以前はありがとございます。
またまたアコーディオンメニューなのですが・・・
http://web.donnatokimo.com/jquery/517
こちらを使用して、クリックして飛ぶようにはなりましたが、
開いているのが一番最初だけになってしまうので、コンテンツごとに開いた状態を制御したいです。

まったく知識が無いので、できればやさしく詳しく説明していただけると助かります。

どうかよろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

No1、No2です。


JavaScript部分が提示されたもの全てだとして、
以下の記載のものに差し替えればご希望の挙動になると思います。

var j$ = jQuery;

j$(function(){
var menuck = "";
if(document.cookie){
var ckarr = document.cookie.split("; ");
for( var i = 0; i < ckarr.length; i++ ){
if(ckarr[i].indexOf('menuOpen=') === 0 && ckarr[i].length > 9){
menuck = ckarr[i].substr(9,ckarr[i].length);
break;
}
}
}
function setBackground() {
var $last = j$(".acc > li:last > a");
if($last.hasClass("close")){
$last.css("background-position", "left bottom");
} else{
$last.css("background-position", "left -30px");
}
}

j$(".acc").each(function(){
j$("li > ul" , this).wrap("<div></div>");
j$("li > div:not(:last)", this).append("<div class='notlast'></div>");
j$("li > div:last" , this).append("<div class='last'></div>");

j$("a.open", this).each(function(index){
if((menuck == "" && index > 0) || (menuck != "" && menuck != index)){
j$(this).addClass("close").next().hide();
} else{
j$(this).css("background-position", "left top");
}
setBackground();

var prms = {height:"toggle", opacity:"toggle"};
j$(this).click(function(){
var indexcnt = j$("a.open").index(this);
if(j$(this).hasClass("close")){
document.cookie="menuOpen="+indexcnt+"; path=/; expires=Tue, 31-Dec-2030 23:59:59;";
} else{
document.cookie="menuOpen=; path=/; expires=Tue, 1-Jan-1980 00:00:00;";
}
j$(this).toggleClass("close").next().animate(prms, {duration:"fast"})
.parent().siblings().children("div:visible").animate(prms, {duration:"fast"}).prev().addClass("close");
setBackground();
return false;
});
});
});
});
    • good
    • 0
この回答へのお礼

凄いです。本当にありがとうございました。
私に知識が無くすいません。
お忙しいところ教えていただき、助かりました。

お礼日時:2011/10/30 08:13

No1です。



>??分かりません・・・
見るところが違ってますよ^^;
ANo.3の回答がお望みの仕様です。

実際のHTMLソースも一切書かれていないので、
アドバイスのしようもありません。

この回答への補足

上のサイトとまったく同じソースです。
jsファイルはこれになります。

var j$ = jQuery;

j$(function(){

function setBackground() {
var $last = j$(".acc > li:last > a");
if($last.hasClass("close"))
$last.css("background-position", "left bottom");
else
$last.css("background-position", "left -30px");
}

j$(".acc").each(function(){
j$("li > ul" , this).wrap("<div></div>");
j$("li > div:not(:last)", this).append("<div class='notlast'></div>");
j$("li > div:last" , this).append("<div class='last'></div>");

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

if(index > 0)
$this.addClass("close").next().hide();
else
$this.css("background-position", "left top");

setBackground();

var prms = {height:"toggle", opacity:"toggle"};
$this.click(function(){
j$(this).toggleClass("close").next().animate(prms, {duration:"fast"})
.parent().siblings().children("div:visible").animate(prms, {duration:"fast"}).prev().addClass("close");
setBackground();
return false;
});
});
});
});

補足日時:2011/10/29 16:54
    • good
    • 0

以前に似たような質問に回答したことがあります。


http://oshiete.goo.ne.jp/qa/6797636.html
参考になりましたら。

この回答への補足

ありがとうございます。
やはり初心者のので・・・・よく分かりません。

CSSのメニュー部分の指定を全て抜き出し
css/menu.css
などで保存し、各ページのHTML上で呼び出します。
<link rel="stylesheet" href="css/menu.css" type="text/css">
などのように。

同じように、メニュー部分のJavaScriptも抜き出し
js/menu.js
などで保存し、各ページのHTML上で呼び出します。
<script type="text/javascript" src="/js/menu.js"></script>

??分かりません・・・

補足日時:2011/10/29 15:54
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

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

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

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)が一番簡単かと思われます。

Qページ遷移時にアコーディオンメニューの開閉状態を保持する2

宜しくお願いします。

http://testbloom.sitemix.jp/shampoo/

上記に検証用のURLを記します。

カテゴリー1の中にある「今だから知りたいノンシリコンシャンプーのあれこれ!?」をクリックしてページを遷移した時にカテゴリー2の内容を全て閉じるようにしたいです。
(カテゴリー2をクリックすると全て折りたたまれる状態)
カテゴリー1に所属する内容はそのまま開いている状態を維持します。

出来ればCookieを使わずに実装したく思います。

お手数をおかけ致しますが教えて下さい。

Aベストアンサー

いずれにしろ、どこかに状態を識別できるデータを残しておく必要がありますが、方法はいろいろあるかと。


クライアント側で処理するなら
 ・クッキーを利用する …… (これは×との条件)
 ・DOM Storageを利用する
 ・URL(クエリ部などを利用)
などが考えられると思います。

でも、ご提示のサンプルではリンク先がみな個別のアドレスになっているようですので、URLそのものを識別用に使うことも可能ですね。

・・・って、よく見れば、『 URLと同じリンクにactiveクラスを設定する 』といったことをすでにやっているようですから、それがちゃんと動作しているのなら、そこで特定された要素の親カテゴリだけ表示するようにしてあげるのが手っ取り早いのではないでしょうか?


一方で、HTMLの出力元はみなphpのようですので(個別ファイルなのか一括対応なのかわかりませんが)、URLに応じてサーバ側で先にHTMLソースに設定(クラス設定などを利用)しておくといったやり方のほうがスマートかもしれませんね。

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();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応...続きを読む

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アコーディオンで開かれたパネルの位置にスクロール

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

下記サイトを参考にスマホサイトにアコーディオンを作成しました。
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アコーディオンメニューをアンカーリンクで開く

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

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

■現状

・アンカーリンク(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ページ遷移時にアコーディオンメニューの開閉状態を保持する

宜しくお願いします。

下記に参考にしたURLを記します。
http://html-five.jp/364/
http://html-five.jp/demo/010/

2つ目にある参考サイトの中で教えて頂きたいのですが、現状はLIST1とLIST2を開いた状態でLIST1-2をクリックするとページの状態が変わらない状態になります。実現したいことはLIST1-2をクリックするとそれ以外のLISTを閉じたいのです。今回の例ではLIST2を閉じてLIST1-2が所属しているLIST1は開いたままにしたいのです。宜しくお願いします。

Aベストアンサー

こんにちは。

2段目のリストはリンクに設定されているようですので、スクリプトで他を閉じても、リンクの結果ページ遷移してしまいますが・・・?
それとも、リンク先のページにも同じアコーディオンメニューを設置していて、そちらに結果を反映したいということなのかな。

ひとつの解決法としては、開/閉が排他的に行われる(開いているのは一つだけ)ようにするというのが考えられます。
動作自体は現状のままでよくて、リンクをクリックした時だけ他を閉じたいというのであれば、そのような処理だけを付け加えるという考えもあります。
ご質問は、多分、後者であると思いますので・・・

言葉の通り、他のリストを閉じるというイベントを付け加えれば良いのですが、もとのスクリプトが「閉じる」という動作を明示しておらずみなtoggleで処理をしていますので、「開いているものをクリックする」という処理にするほうが簡単かな。
開いているものには"open"のクラスを付与するようになっているらしいので、それが利用できそうなのですが、何だかおかしいですね。
クッキーから読み込んで開いた時にはクラス設定をしておらず、その後はtoggleで処理してしまっているので、クラス設定がすっと逆転したままになってしまうものができてしまうようで、残念ながら利用できそうもないですね。

というわけで、開閉状態も自前で判断することにして、以下を追加すれば、一応ご質問のような動作になると思います。
(インデントは全角スペースにしてあります)
$(".accordion ul a").click(function(){
 var lis = $(".accordion>li");
 var idx = lis.index($(this).parent().parents("li:first"));
 lis.each(function(i){
  if(i != idx && $(this).children("ul:visible").length) $(this).children("p").click();
 });
});

付けたしなので必ずしも効率的ではありませんし、クラス設定のこともあるので、全体を整理し直した方が適切なコードになると思います。

こんにちは。

2段目のリストはリンクに設定されているようですので、スクリプトで他を閉じても、リンクの結果ページ遷移してしまいますが・・・?
それとも、リンク先のページにも同じアコーディオンメニューを設置していて、そちらに結果を反映したいということなのかな。

ひとつの解決法としては、開/閉が排他的に行われる(開いているのは一つだけ)ようにするというのが考えられます。
動作自体は現状のままでよくて、リンクをクリックした時だけ他を閉じたいというのであれば、そのような処理だけを付け加...続きを読む

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の方も修正する方法でもよけ...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q折りたたみメニューについて教えてください

いろんなサイトを参考にして、JavaScriptを使った折りたたみメニューを作りました。

左右にページを分けて左側のメニューを下記のような折りたたみメニューにしたいと
思っています。

折りたたみ1
 項目A
 項目B
折りたたみ2
 項目C
 項目D

折りたたみ1をクリックすると項目Aと項目Bが出てきて喜んだのもつかの間
項目Aをクリックして右側にページが表示されると、開いたはずの
項目Aと項目Bが閉じてしまいます。

折りたたみ1を再度クリックするまで閉じないメニューを作るのには
どうすればいいでしょうか。
参考になるサイトなどがあれば教えていただけないでしょうか。

よろしくお願いいたします。

Aベストアンサー

>初心者には難しすぎたのかもと思い始めています。
基盤は出来ているのですから、後は実装するだけですね。
デモは↓こちらで
http://okwave.xrea.jp/jquery/test6797636/

複数のページに渡って同じ指定をしなければならないので、
もし各ページにCSSとJavaScriptを書いているのでしたら、
一括されたほうが良いです。

CSSのメニュー部分の指定を全て抜き出し
css/menu.css
などで保存し、各ページのHTML上で呼び出します。
<link rel="stylesheet" href="css/menu.css" type="text/css">
などのように。

同じように、メニュー部分のJavaScriptも抜き出し
js/menu.js
などで保存し、各ページのHTML上で呼び出します。
<script type="text/javascript" src="/js/menu.js"></script>

これで、JS部、またはCSSを書き換えたい場合、cssファイル、またはJSファイル1つを修正すれば良くなり、管理も楽で整理もされます。

私でよければ、今現在のHTMLとCSS、JSを提示してくれれば見ますよ。

>初心者には難しすぎたのかもと思い始めています。
基盤は出来ているのですから、後は実装するだけですね。
デモは↓こちらで
http://okwave.xrea.jp/jquery/test6797636/

複数のページに渡って同じ指定をしなければならないので、
もし各ページにCSSとJavaScriptを書いているのでしたら、
一括されたほうが良いです。

CSSのメニュー部分の指定を全て抜き出し
css/menu.css
などで保存し、各ページのHTML上で呼び出します。
<link rel="stylesheet" href="css/menu.css" type="text/css">
などのように。

同じよ...続きを読む


人気Q&Aランキング