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

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

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

No.3 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/09/26 19:13

されたいことが理解できていないのですが・・

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

この回答へのお礼

画像を添付しました。

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

お礼日時：2014/09/27 13:49

No.2 回答者： ORUKA1951 回答日時： 2014/09/25 19:50

jquery使わなくても・・特にナビゲーションは

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
JavaScript、Cookie、セッション ID、フレーム、DHTML、Flash などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン（品質に関するガイドライン） - ウェブマスター ツール ヘルプ( https://support.google.com/webmasters/answer/357 … )］より
　クリックして開く動作のようですが、マウスオーバーでの動作なら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/HT … )
　でブラウザの表示メニューからスタイルを選択(Chromeは代替スタイルシート使えない)
　印刷プレビューしたり、ウィンドウ幅変えたり、スタイルシート無し(検索エンジンが見ている姿)にしてみると分かるかな？？


　

この回答への補足

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

こちらのイメージです。

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

補足日時：2014/09/26 16:39

この回答へのお礼

/*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;
}


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

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

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

お礼日時：2014/09/26 16:06

No.1 回答者： Taiyonoshizuku 回答日時： 2014/09/25 15:57

ｊ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>

補足日時：2014/09/25 16:39