ドロップダウンを２つ実装したら開かなくなった

Question

###実装したいこと
レスポンシブでメニューを画像のようにheaderの左右に固定し
それぞれ違う内容がドロップダウンするのをjQueryを使って作成してます。
１つ目はうまくいったのですが同じ方法で２つ目を作ったら両方開かなくなりました。

###書き込んでいる内容
下記、作成しているコードです。

<div id="spbatsu" class="pcnone"><!-- 三本線のメニュー、cssアニメーションで×になる１ -->
	<a class="menu-trigger" href="#">
		<span></span>
		<span></span>
		<span></span>
	</a>
</div>
<!-- ドロップダウンで表示される内容１ -->
<div id="panel">
	<div id="panel_in">
		<ul id="panel_in_ul">
			<li class="spmenuin_li"><a href="#">トップページ</a></li>
			<li class="spmenuin_li spyazi"><a href="#" class="panel_in_li">店舗一覧</a>
				<ul class="spmenuin_li_in">
					<li><a href="#" class="spmenuin_li_in_li">●●店</a></li>
					<li><a href="#" class="spmenuin_li_in_li">●●店</a></li>
				</ul>
			</li>
			<li class="spmenuin_li spyazi"><a href="#" class="panel_in_li">メニュー</a>
				<ul class="spmenuin_li_in">
					<li><a href="#" class="spmenuin_li_in_li">ランチメニュー/a></li>
					<li><a href="#" class="spmenuin_li_in_li">ディナーメニュー</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
	

<div id="spbatsu2" class="pcnone"><!-- 三本線のメニュー、cssアニメーションで×になる２ -->
	<a class="menu-trigger2" href="#">
		<span></span>
		<span></span>
		<span></span>
	</a>
</div>
<!-- ドロップダウンで表示される内容２ -->
<div id="panel2">
	<div id="panel_in2">
		<p class="yoyakup">レストラン</p>
		<div class="spbtm"><a href="#">予約</a></div>
		<p><a href="tel:[phone]" class="sp_tel_ablack">0123456789</a></p>
		<p>定休日：なし</p>
		<hr />
		<p class="yoyakup">カフェ</p>
		<div class="spbtm"><a href="#">予約</a></div>
		<p><a href="tel:[phone]" class="sp_tel_ablack">0123456789</a></p>
		<p>定休日：なし</p>
	</div>
</div>

/* SPメニューここから */
	#panel {display: none; width: 100%; margin: 0; padding: 20px 0 35px 50px; background: #fff; z-index: 100; position: fixed; top: 60px; font-size: 13px; overflow-y: scroll; width: 100%; height: 100%;}
	#panel a{color:#000;}
	#panel2 {display: none; width: 100%; margin: 0; padding: 0; background: #fff; z-index: 100; position: fixed; top: 60px; right: 0px; font-size: 13px; overflow-y: scroll; width: 100%; height: 100%;}
	
	#panel_in2{padding:20px; text-align: center;}
	#panel_in2 .yoyakup{padding-bottom: 0.5em; font-weight: bold;}
	
	.panel_in_li{font-size: 13px;}
	
	.menu-trigger,
	.menu-trigger span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	  z-index: 100;
	}
	.menu-trigger {
	  position: relative;
	  position: fixed;
	  width: 32px;
	  height: 16px;
	}
	.menu-trigger span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #000;
	}
	.menu-trigger span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger span:nth-of-type(2) {
	  top: 7px;
	}
	.menu-trigger span:nth-of-type(3) {
	  bottom: 0;
	}
	.menu-trigger.active span:nth-of-type(1) {
	  -webkit-transform: translateY(7px) rotate(-45deg);
	  transform: translateY(7px) rotate(-45deg);
	}
	.menu-trigger.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-7px) rotate(45deg);
	  transform: translateY(-7px) rotate(45deg);
	}
	
	#spbatsu{
		width:32px;
		position: absolute;
		top: 20px;
		left: 15px;
	}
	
	.menu-trigger2,
	.menu-trigger2 span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	  z-index: 100;
	}
	.menu-trigger2 {
	  position: relative;
	  position: fixed;
	  width: 32px;
	  height: 16px;
	}
	.menu-trigger2 span {
	  position: absolute;
	  left: 0;
	  width: 100%;
	  height: 2px;
	  background-color: #000;
	}
	.menu-trigger2 span:nth-of-type(1) {
	  top: 0;
	}
	.menu-trigger2 span:nth-of-type(2) {
	  top: 7px;
	}
	.menu-trigger2 span:nth-of-type(3) {
	  bottom: 0;
	}
	.menu-trigger2.active span:nth-of-type(1) {
	  -webkit-transform: translateY(7px) rotate(-45deg);
	  transform: translateY(7px) rotate(-45deg);
	}
	.menu-trigger2.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.menu-trigger2.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-7px) rotate(45deg);
	  transform: translateY(-7px) rotate(45deg);
	}
	
	#spbatsu2{
		width:32px;
		position: absolute;
		top: 20px;
		left: 15px;
	}

$(function() {
  $(".menu-trigger").click(function() {
    $("#panel").slideToggle(350);
    $(".menu-trigger").toggleClass('active');
    return false;
  });
});

$(function(){
	$(".spmenuin_li a").click(function(){
	    $(this).next("ul").slideToggle();
	    $(this).toggleClass("open");
	});
});

$(function() {
  $(".menu-trigger2").click(function() {
    $("#panel2").slideToggle(350);
    $(".menu-trigger2").toggleClass('active');
    return false;
  });
});

申し訳ありませんがコードが非常に長くなっています。
ネットで調べながらいろいろ書き足したコードなのでなれている方には汚く見にくいかと思われますがどうかお助け下さい。
よろしくお願いいたします。

Comments

[m.ts10806]

開発ツールのコンソールにエラーは出ていませんか？

[satoshickkk]

エラーの見方がわからないのですがgoogleのデベロッパーでも見ることはできますか？

[m.ts10806]

Chromeであれば「Console」というタブがありますよ。

[satoshickkk]

「Console」でエラーをみつけて該当するものを消したところ無事に動きました！他のところで悪さしていました…お手数おかけして申し訳ないです。

Answer 1

mts10806様に教えていただいたgoogleの「Console」でエラーを確認。
エラーが出ていたフェードイン系のコードを削除したところ問題なくメニュー開閉出来るようになりました。

Comments

[m.ts10806]

具体的にはどのようなエラーでしたか？
同じような問題がでたとき（または同じような問題に遭遇した人）の備忘録にもなるので、回答に追記してみてください。

[satoshickkk]

bodyにかけていたフェードイン$('body').fadeMoverがメニューのコードより先に来ていたので
$('body').fadeMoverを一番最後に移動させたらメニュー開閉できました。
今回は他のコードでエラーが出ていました。

Answer 2

上記のコードで確認したら、ちゃんと動いてましたよ。
両方開かないというのは、クリックしてもまったく反応しない状態ですか？

あと動きとは関係ないですが、#spbatsu2と#spbatsuのpositionが同じ位置になっているので、どちらかを右に移動させたほうがいいですね。

Comments

[satoshickkk]

環境を変えたら上記のコードで動きました。
何かが影響していてうまく動いていないだけでした。
positionが同じ位置なのを修正しようかと思います、ありがとうございます！
ちなみにですがメニュー１を開けたままメニュー２を開けるとドロップダウン同士が重なって表示されてしまうのですがどう対処したらよいのかお分かりになられますか？