htmlに
<ul id="dropmenu"> <li class="dropitem"><a href="#">名前</a> <ul> <li><a href="#">Tom</a></li> <li><a href="#">Juddy</a></li> </ul> </li> <li class="dropitem"><a href="#">住所</a> <ul> <li><a href="#">NY</a></li> <li><a href="#">London</a></li> </ul> </li> <li class="dropitem"><a href="#">職業</a> <ul> <li class="nextitem"><a href="#">ビジネスマン</a> <ul> <li><a href="#">金融</a></li> <li><a href="#">医療</a></li> <li><a href="#">製造</a></li> </ul> </li> <li class="nextitem"><a href="#">その他</a> <ul> <li><a href="#">主婦</a></li> <li><a href="#">フリーター</a></li> <li><a href="#">その他</a></li> </ul> </li> </ul> </li> </ul> <script> $u('.dropitem').click(function(){ $(this).children().show(); } </script>
と書いてcssに
#mainsection{ background-color:white; border: 1px #D4D4D5 solid; float: left; height: 100%; width: 15%; } #dropmenu{ position: relative; list-style-type: none; width: 1000px; height: 40px; margin-top: 50px; padding: 0; } .dropitem{ width: 20%; position: relative; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; font-size: 17px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li ul li{ overflow: hidden; height: 0; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; text-align: left; font-size: 12px; font-weight: normal; overflow: hidden; } .dropitem > ul { position: absolute; left: 100%; width: 100%; top: 0; } .nextitem { position: relative; } .dropitem ul li ul li { position: relative; left: 100%; width: 100%; top: -38px; }
と書きました。
名前or住所or職業をクリックすると、
例えば名前なら
<ul> <li><a href="#">Tom</a></li> <li><a href="#">Juddy</a></li> </ul>
が、
住所なら
<ul> <li><a href="#">NY</a></li> <li><a href="#">London</a></li> </ul>
が、
職業なら
<li class="nextitem"><a href="#">ビジネスマン</a> ``` と ```ここに言語を入力 <li class="nextitem"><a href="#">その他</a>
が表示されるようにしたいです。
さらに、ビジネスマンがクリックされると
<ul> <li><a href="#">金融</a></li> <li><a href="#">医療</a></li> <li><a href="#">製造</a></li> </ul>
が、その他がクリックされると
<ul> <li><a href="#">主婦</a></li> <li><a href="#">フリーター</a></li> <li><a href="#">その他</a></li> </ul>
が出るようにしたいです。しかし、今どの要素をクリックしてもその子要素が出ないです。clickが動いていないようなのですが、何が問題なのでしょうか?
どのよう直したら意図した挙動になりますか?
アコーディオン型のメニューにしたいとの理解で良いのでしょうか?参考とするサイト等があれば、ご提示ください。
回答3件
あなたの回答
tips
プレビュー