他の場所がクリックされたらhoverが閉じるようにしたい

他の場所がクリックされたらhoverが閉じるようにしたいです。

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

$(function() {
  $('#dropmenu a').siblings().hide().end().click(function(event){
    $(this).siblings().toggle();
    event.preventDefault();
    return false;
  });
});
</script>

とhtmlを書き、

#dropmenu{
  position: relative;
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin-top: 50px;
  padding: 0;
}

#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 30px 15px;
  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 {
  display: flex;
}

とcssを書きました。
今の状態だと、例えば名前がクリックされたら、

    <ul>
       <li><a href="#">Tom</a></li>
       <li><a href="#">Juddy</a></li>
    </ul>

が表示され、
その状態で職業をクリックすると、Tom&Juddyが表示されたまま

<li class="nextitem"><a href="#">ビジネスマン</a>

が表示されます。再び名前をクリックすると名前タブは閉じます。

これを、例えば名前タブが開いたまま職業タブをクリックすると、名前タブは閉じるようにしたいです。
要は、タブAが何階層か開いていても、別のタブをクリックしたらタブAを閉じるようにしたいです。

<script>

$(function() {
  $('#dropmenu a').siblings().hide().end().click(function(event){
　 $('#dropmenu a').siblings().hide().end();
    $(this).siblings().toggle();
    event.preventDefault();
    return false;
  });
});
</script>

とするとタブをクリックしても開かなくなってしまいました。

どのように書くと意図した挙動になりますか？

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

回答2件

こうですかね

javascript
1$(function() {
2  $('#dropmenu a').on('click',function(e){
3    $(this).next('ul').toggle();
4    $(this).closest('li').siblings('li').find('ul').hide();
5    e.preventDefault();
6  }).eq(0).trigger('click');
7});

投稿2018/06/21 11:26

yambejp

総合スコア117605

ベストアンサー

質問者さんが実現したいことは、以下のように行えると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        * {
8            padding: 0;
9            margin: 0;
10        }
11
12        #dropmenu {
13            position: relative;
14            list-style-type: none;
15            width: 1000px;
16            height: 40px;
17            margin-top: 50px;
18            padding: 0;
19        }
20
21        #dropmenu li a {
22            display: block;
23            margin: 0;
24            padding: 15px 30px 15px;
25            font-size: 17px;
26            font-weight: bold;
27            line-height: 1;
28            text-decoration: none;
29        }
30
31        #dropmenu li ul {
32            list-style: none;
33            margin: 0;
34            padding: 0;
35            border-radius: 0 0 3px 3px;
36        }
37
38        #dropmenu li {
39            display: flex;
40        }
41    </style>
42</head>
43<body>
44<ul id="dropmenu">
45    <li class="dropitem"><a href="#">名前</a>
46        <ul>
47            <li><a href="#">Tom</a></li>
48            <li><a href="#">Juddy</a></li>
49        </ul>
50    </li>
51    <li class="dropitem"><a href="#">住所</a>
52        <ul>
53            <li><a href="#">NY</a></li>
54            <li><a href="#">London</a></li>
55        </ul>
56    </li>
57    <li class="dropitem"><a href="#">職業</a>
58        <ul>
59            <li class="nextitem"><a href="#">ビジネスマン</a>
60                <ul>
61                    <li><a href="#">金融</a></li>
62                    <li><a href="#">医療</a></li>
63                    <li><a href="#">製造</a></li>
64                </ul>
65            </li>
66            <li class="nextitem"><a href="#">その他</a>
67                <ul>
68                    <li><a href="#">主婦</a></li>
69                    <li><a href="#">フリーター</a></li>
70                    <li><a href="#">その他</a></li>
71                </ul>
72            </li>
73        </ul>
74    </li>
75</ul>
76<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
77<script>
78    $(function () {
79        $('#dropmenu a').siblings().hide().end().click(function (event) {
80            $(this).siblings().toggle();
81            $(".dropitem ul").not($(this).parents(".dropitem").find("ul")).hide(); // 追記
82            event.preventDefault();
83            return false;
84        });
85    });
86</script>
87</body>
88</html>