アコーディオンがうまくいかない。

質問

アコーディオンをJQUERYで作ったのですが、下の要素の背景の画像にクリックした際に出てくるリンク要素がめりこむみクリックできないのです。

なぜ下の要素の文字などは、出てきた要素にしたがって、下がってくれるのに背景画像だけが下がらずめり込むのでしょうか？
また背景がめり込んだリンクのみクリックできなくなる仕様なのかもしれませんが、背景画像がめり込んでもクリックできるようにする方法は無いのでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

されたいことが理解できていないのですが・・
イメージで上げられた形は
┌──┬──┬─────┬──┬──┬───┬──┬──┐
│html│css │javascript│php │CGI │Python│Ruby│java│
└──┴──┴─────┴──┴──┴───┴──┴──┘
なのですが、どのようにアコーディオンするのですか・・
　それぞれに二階層目のリストがあって
┌──┬──┬─────┬──┬──┬───┬──┬──┐
│html│css │javascript│php │CGI │Python│Ruby│java│
└──┼──┴┬────┴──┴──┴───┴──┴──┘
　　　│CSS2.1│
　　　├───┤
　　　│ CSS3 │
　　　└───┘
と開くのか。

お礼

画像を添付しました。

listを下ろした状態の画像です。
下のdivにめり込んでいます。
ただその中にあるテキストは下に移動しています。
もしかしてインライン要素だけ下に移動してくれるのでしょうか？

回答No.2

ORUKA1951

jquery使わなくても・・特にナビゲーションは
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/35769?hl=ja#2 )］より
　クリックして開く動作のようですが、マウスオーバーでの動作ならCSS2.1だけで可能ですし、ユーザーのシステムに依存しない。例えば印刷時や携帯にはすべて見せるとか。
　CSS3を使うとクリック動作もできます。

＞なぜ下の要素の文字などは、出てきた要素にしたがって、下がってくれるのに背景画像だけが下がらずめり込むのでしょうか？
　ｚ-indexでレイヤーの前後を指定すこと
　position:absoluteで他の要素に影響しないようにすること
この２点です。

サンプル：これだけでよいはずです。
<div class="nav">
　<h2><a href="#MENUE">MENU</h2>
　<ul id="MENUE">
　　<li><a href="/s/index.html">TOP</a></li>
　　<li><a href="/s/hotel.html">HOTEL</a></li>
　　<li><a href="/s/event.html">BLOG</a></li>
　　<li><a href="/s/access.html">ACCESS</a></li>
　　<li><a href="/s/inquery.html">CONTACT</a> </li>
　</ul>
</div>

こちらのサイト
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html )
　でブラウザの表示メニューからスタイルを選択(Chromeは代替スタイルシート使えない)
　印刷プレビューしたり、ウィンドウ幅変えたり、スタイルシート無し(検索エンジンが見ている姿)にしてみると分かるかな？？

お礼

/*gnavi*/
div.nav {
display: block;
width: 650px;
margin: 300px auto 210px auto;
z-index: 1000;
}

ul.nav {
margin: 0px auto 0px auto;
width: 625px;/*li5個分のサイズ*/
list-style:none;z-index: 1000;
}

/*ホバー前の画像*/
li.nav img {
display: block; z-index: 1000;
}

li.nav a:hover img{
visibility: hidden;z-index: 1000;
}

li.nav+li a:hover img{
visibility: hidden;z-index: 1000;
}

li.nav+li+li a:hover img{
visibility: hidden;z-index: 1000;
}

li.nav+li+li+li a:hover img{
visibility: hidden;z-index: 1000;
}

li.nav+li+li+li+li a:hover img{
visibility: hidden;z-index: 1000;
}

/*ホバー後の画像*/
ul.nav li a[href] {
display: block;
width: 125px;
height: 125px;
float: left;
z-index: 1000;
}

上記のようにしても駄目でした。

スマホサイトでよくあるのですがポジションで上に乗っけないと無理なのですか？

ポジションでコンテンツの上に乗っけると変なのでコンテンツに下がってもらう事は出来ないのでしょうか？

補足

http://js.crap.jp/book/chapter2/responsive-menu.html

こちらのイメージです。

したのボックスの背景はめり込まず完全にしたに一緒に下りています。

回答No.1

Taiyonoshizuku

ｊQueryでどうやって作ったかわからないと、適切な回答はつかないと思うよ。

jQuery使った場合はどんなHTMLの構成になっているか、cssはどのようになっているかが重要だから。

補足

ソースがあったほうが良いですね。
下記に添付します。

JQUERY
<!--Gnavi Toggle-->
<script type="text/javascript">
$("ul.nav li").hide();
$(function(){
$("div.toggle").click(function() {
$("ul.nav li").slideToggle();
return false;
05
});
});
</script>

HTML
<div class="nav">
<div class="toggle"><a href="#" class="btn">MENU<a></div>
<ul class="nav">
<li class="nav"> <a href="http://s/index.html"><img alt="top" src="img/base/litop.png" width="125" height="125" /></a> </li>
<li> <a href="http://s/hotel.html"><img alt="top" src="img/base/hotel.png" width="125" height="125" /></a> </li>
<li> <a href="http://s/event.html"><img alt="top" src="img/base/event.png" width="125" height="125" /></a> </li>
<li> <a href="http://s/access.html"><img alt="top" src="img/base/access.png" width="125" height="125" /></a> </li>
<li> <a href="http://s/inquery.html"><img alt="top" src="img/base/inquery.png" width="125" height="125" /></a> </li>
</ul>
</div>
<!--nav end-->
<div class="contentstop">
<div>
<h2> <img src="img/index/fu.png" alt="Óɲ¼¤È¤Ï" width="182" height="60" /> </h2>
<p class="indent"> ØN¤«¤Ê×ÔÈ»¤È¡￠½ü´úµÄ¤ÊÓQ¹â¥¹¥Ý¥Ã¥È¡￠Ò»Á÷ÂÃð^¤ËÓÐÃû¥·¥§¥Õ¤Î¥ì¥¹¥È¥é¥ó¤￢¤￠¤ê¡￠×ÔÈ»¤È¸ß¼‰¤￢I·½Î¶¤ï¤¨¤ëÓQ¹âµØ¤Ç¤¹¡￡ </p>