アコーディオンパネルでメニュー表示時には他のコンテンツの透明度を変えたい

よくあるアコーディオンパネルの実装なのですが、アコーディオンが表示されている際は
他のコンテンツをぼかしたり、透明度を変えたりしたいのですが、全てに反応してしまいアコーディオン自体消えてしまったりしてしまいます。
jsのnotの使い方がおかしいのでしょうか、、
どなたかご教授お願いできますでしょうか。。。

html
1<div id="menu">
2		<dl id="panel">
3  			<dt>View All</dt>
4  			<dd>
5  				<ul>
6  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
7  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
8  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
9  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
10  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
11  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
12  					<li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
13  				</ul>
14  			</dd>
15		</dl>
16	</div>

css
1#menu {
2  @include mq(pc) {
3    width: 96%;
4    max-width: 960px;
5  margin: 0 auto;
6  }
7  #panel {
8    width: 100%;
9    text-align: center;
10    dt {
11      font-family: "iskoola_pota";
12      font-size: 16px;
13      &::before {
14      content: "";
15      display: block;
16      width: 1px;
17      height: 40px;
18      margin: 0 auto 10px;
19      background-color: #000;
20    }
21    }
22    dd {
23      ul {
24        display: flex;
25        flex-wrap: wrap;
26        justify-content: center;
27        align-items: center;
28        li {
29          width: 30%;
30        }
31      }
32    }
33  }
34}
35
36.opacity {
37  animation: opacity 1.2s linear .0s 1 forwards;
38}
39
40@keyframes opacity {
41  0% {
42    opacity: 1; }
43  100% {
44    opacity: 0; }
45
46}

jQuery
1$(function(){
2  	$("#panel > dd").hide();
3  	$("#panel > dt").click(function(){
4  		$("+dd",this).slideToggle(500);
5  		$("div:not(#menu)").toggleClass("opacity");
6  	});
7  });

kei344

2019/01/14 15:04

CSSではないのでは？また、HTMLはBODY要素から提示してください。

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

回答1件

こんな感じですか？

javascript
1<script>
2$(function(){
3  $("#panel > dd").hide();
4  $("#panel > dt").click(function(){
5    var dd=$(this).find("+dd");
6    dd.prop("display",dd.prop("display")?false:true).slideToggle(500);
7    $("div:not(#menu)").animate({"opacity":(dd.prop("display")?0.1:1)});
8  });
9});
10
11</script>
12<div id="menu">
13        <dl id="panel">
14              <dt>View All</dt>
15              <dd>
16                  <ul>
17                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
18                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
19                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
20                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
21                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
22                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
23                      <li><a href=""><img src="img/dress/04.jpg" alt=""></a></li>
24                  </ul>
25              </dd>
26        </dl>
27</div>
28<div>hoge</div>
29<div>fuga</div>
30