クリックしたら要素が出てくるようにしたい

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が動いていないようなのですが、何が問題なのでしょうか？
どのよう直したら意図した挙動になりますか？

yoshinavi

2018/06/20 14:37

アコーディオン型のメニューにしたいとの理解で良いのでしょうか？参考とするサイト等があれば、ご提示ください。

行動規範の内容に同意します

回答3件

ありがちですが、cssとチェックボックスの組み合わせ

CSS
1.view{display:none;}
2.view:not(:checked)+ul{display:none;}

HTML
1<ul id="dropmenu">
2  <li class="dropitem"><a href="#"><label for="c1">名前</label></a>
3    <input type="checkbox" id="c1" class="view"><ul>
4       <li><a href="#">Tom</a></li>
5       <li><a href="#">Juddy</a></li>
6    </ul>
7  </li>
8
9  <li class="dropitem"><a href="#"><label for="c2">住所</label></a>
10    <input type="checkbox" id="c2" class="view"><ul>
11       <li><a href="#">NY</a></li>
12       <li><a href="#">London</a></li>
13    </ul>
14  </li>
15
16  <li class="dropitem"><a href="#"><label for="c3">職業</label></a>
17    <input type="checkbox" id="c3" class="view"><ul>
18       <li class="nextitem"><a href="#"><label for="c3-1">ビジネスマン</label></a>
19           <input type="checkbox" id="c3-1" class="view"><ul>
20              <li><a href="#">金融</a></li>
21              <li><a href="#">医療</a></li>
22              <li><a href="#">製造</a></li>
23           </ul>
24       </li>
25       <li class="nextitem"><a href="#"><label for="c3-2">その他</label></a>
26           <input type="checkbox" id="c3-2" class="view"><ul>
27              <li><a href="#">主婦</a></li>
28              <li><a href="#">フリーター</a></li>
29              <li><a href="#">その他</a></li>
30           </ul>
31       </li>
32    </ul>
33  </li>
34</ul>
35

投稿2018/06/21 04:18

yambejp

総合スコア114775

ベストアンサー

いったんCSSはすべてないものとして

CSS
1#dropmenu li {
2  display: flex;
3}

JavaScript
1$(function() {
2  $('#dropmenu a').siblings().hide().end().click(function(event){
3    $(this).siblings().toggle();
4    event.preventDefault();
5    return false;
6  });
7});

投稿2018/06/21 01:59

x_x

総合スコア13749

kaitotokai

2018/06/21 07:18

ありがとうございます。一番意図したものに近い回答をいただけたのでベストアンサーにさせていただきます。

行動規範の内容に同意します

まず、scriptタグでjqueryは読み込んでますか？

「$u」ってなんですか？「$」の間違いかな？

functionの前から始まったカッコが閉じてません。

javascript
1  $('.dropitem').click(function(){
2     $(this).children().show();
3  });

↑これで文法ミスはなくなりますが、思ったとおりの動きはしない気がします。

開け閉めならこんな感じでいけると思います。

javascript
1$('.dropitem > a').click(function(){
2  $(this).parent().find('> ul').toggle();
3});
4
5$('.nextitem > a').click(function(){
6  $(this).parent().find('> ul').toggle();
7});