どなたかご教授願います。 javascript(jQuery)を利用した表示・非表示を切り替えるやり方はいろいろあると思うのですが、私が思うようなものが実現できません。個人的ポイントは、初期状態では表示された状態ボタンを押すごとに表示・非表示を切り替えられる１ページ内に複数ボタンを設置１つのボタンで複数個所のエリアの表示・非表示を適用するボタンから離れた場所のエリアを表示・非表示にする状態をクッキーに保存するコードの可能な限りの簡略化 (※構築イメージは添付ファイルを参照ください。) です。よろしくお願い致します。参考にした質問・知恵袋・サイト様 (1) http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12114911402 (2) http://blog.caraldo.net/2009/03/jqcookiemenu.php (3) http://oshiete.goo.ne.jp/qa/7259699.html →(1)複数ボタンを設置する場合は、それだけコードを増やさなければならない。また、１つのボタンで適用されるのは１ヵ所のみ。 →(2)複数ボタンの設置のコードは(1)に比べ少なくて済むが、こちらも１つのボタンで適用されるのは１ヵ所のみ。 →(3)１つのボタンで複数個所を非表示にすることが出来るが、再び表示する場合にはクッキーを初期化しなければならない。また、コードが隣接していなければならない。 (※一部コードを書き換えれば実現可能かもしれませんが私の理解レベルではこれが限界です。申し訳ありません。)

javascriptで複数の表示・非表示切り替え

解決済

質問者：shiroto_4610
質問日時：2014/09/28 13:13
回答数：2件

どなたかご教授願います。

javascript(jQuery)を利用した表示・非表示を切り替えるやり方はいろいろあると思うのですが、私が思うようなものが実現できません。

個人的ポイントは、

初期状態では表示された状態
ボタンを押すごとに表示・非表示を切り替えられる
１ページ内に複数ボタンを設置
１つのボタンで複数個所のエリアの表示・非表示を適用する
ボタンから離れた場所のエリアを表示・非表示にする
状態をクッキーに保存する
コードの可能な限りの簡略化
(※構築イメージは添付ファイルを参照ください。)

です。よろしくお願い致します。

参考にした質問・知恵袋・サイト様

(1)
http://detail.chiebukuro.yahoo.co.jp/qa/question …
(2)
http://blog.caraldo.net/2009/03/jqcookiemenu.php
(3)
http://oshiete.goo.ne.jp/qa/7259699.html

→(1)複数ボタンを設置する場合は、それだけコードを増やさなければならない。また、１つのボタンで適用されるのは１ヵ所のみ。
→(2)複数ボタンの設置のコードは(1)に比べ少なくて済むが、こちらも１つのボタンで適用されるのは１ヵ所のみ。
→(3)１つのボタンで複数個所を非表示にすることが出来るが、再び表示する場合にはクッキーを初期化しなければならない。また、コードが隣接していなければならない。
(※一部コードを書き換えれば実現可能かもしれませんが私の理解レベルではこれが限界です。申し訳ありません。)

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2014/09/29 17:25

どのようなマークアップを想定しているのかも不明なので、ひとつの考え方の例として簡略化したサンプルを…

クッキーは考慮していませんが、その時の状態を保存する部分と、初期表示を追加する感じ。

ご質問文にいろいろと書いてはありますが、例えば『エリアＡ（非表示）、エリアＢ（表示）』の状態で、ボタンＢを操作するとどうなるのかなどが不明です。とりあえず、常にその時の状態の反転（トグル）になると仮定。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
body{ width:800px; }

div.articles{ width:700px; float:left; }
div.article{ height:250px; position:relative; border:1px solid gray; }

#A, #B, #C { width:500px; height:100px; position:absolute;
　　　　　　right:10px; bottom:10px; background-color:#DDD; }

div.buttons{ width:95px; float:right; }
div.buttons button{ width:100%; display:block; margin-bottom:10px; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …

<script type="text/javascript">
$(function(){
　$("div.buttons button").click(function(){
　　$(this.value).slideToggle();
　});
});
</script>
</head>

<body>
<div class="articles">
<div class="article">
　記事
　<div id="A">（area A）</div>
</div>

<div class="article">
　記事2
　<div id="B">（area B）</div>
</div>

<div class="article">
　記事3
　<div id="C">（area C）</div>
</div>
</div>

<div class="buttons">
　<button type="button" value="#A">area A</button>
　<button type="button" value="#A,#B">area A&B</button>
　<button type="button" value="#B,#C">area B&C</button>
　<button type="button" value="#A,#C">area A&C</button>
　<button type="button" value="#A,#B,#C">area A&B&C</button>
</div>
</body>
</html>

この回答への補足

ご回答ありがとうございます。
ご質問の件について返答させていただきます。

>例えば『エリアＡ（非表示）、エリアＢ（表示）』の状態で、ボタンＢを操作するとどうなるのかなどが不明です。
『エリアＡ（非表示）、エリアＢ（非表示）』となります。
ボタンＢを押してもエリアＡにはまったく干渉せず、エリアＢのみ表示→非表示→表示→…の繰り返しを想定しております。

コードをお書きいただきましたが、

<div class="articles">
<div class="article">
　記事
　<div id="A">（area A）</div>
</div>

<div class="article">
　記事2
　<div id="B">（area B）</div>
</div>

<div class="article">
　記事3
　<div id="B">（area B）</div>　←ここもBになり
</div>
</div>

<div class="buttons">
　<button type="button" value="#A">area A</button>
　<button type="button" value="#B">area B</button>　←このボタンを押すことにより記事2と記事3の(area B)両方に影響があるものを考えています。
</div>

★ボタンＡを押した場合のイメージ

///before///
　記事　
（area A）
　記事2 　
（area B）
　記事3 　
（area B）

[ボタンA]ポチッ
[ボタンB]

///after///
　記事　
　記事2 　
（area B）
　記事3 　
（area B）

★ボタンＢを押した場合イメージ

///before///
　記事　
（area A）
　記事2 　
（area B）
　記事3 　
（area B）

[ボタンA]
[ボタンB]ポチッ

///after///
　記事　
（area A）
　記事2 　
　記事3 　

３つ目のidがBでないといけない理由は記事欄のhtmlコードは共通で、どれも同じものになるためCDEF…と増やせません。