固定ナビのJqueryのアコーディオンメニューの項目をクリックした際にメニューを閉じたい。

JavaScript、初心者のものです。
今回、スマホサイトでjQueryのアコーディオンメニュー（ページ内リンク）を使用しているのですが、ヘッダー（ナビ）部分を固定にしています。
現状ではクリックするとメニューはうまく開くのですが、各項目をクリックすると、リンク箇所にリンクはされるのですが、メニューが開いたままになってしまいます。
メニューボタンをクリックするとメニューは閉じます。

これを各項目をクリックした際にメニューが自動で閉じるのにはどうすればよいのでしょうか？
お手数ですが、ご教示お願いします。
（※ヘッダー部分を固定にする前は、きちんと閉じていました。）


以下ソースを載せておきます。

【JS】
$(function(){
$("#toggle").on("click", function() {
$("#mainnavi").slideToggle();
});
});

$(function(){
$("#mainnavi ul li p, #sidenavi ul li p").click(function(){
$(this).next("ul").slideToggle();
$(this).children("span").toggleClass("open");
});
});


【HTML】
<header>
<div id="header" class="clearfix">
<div class="container clearfix">
<div class="float_left_head">
<h1></h1>
<div class="header_logo"><a href="./"><img src="img/logo_pc.png" alt="" class="img_change img-responsive"></a></div>
</div>
<ul class="header_contact">
<li><img src="img/tell_pc.png" alt=""></li>
<li id="toggle"><img src="img/toggle.png" alt="" width="40" height="40"></li>
</ul>
</div>
</div>
<!-- mainnavi -->
<nav id="mainnavi">
<div class="container">
<ul>
<li class="scroll"><a href="#about">ああああ</a></li>
<li class="scroll"><a href="#flow">ああああ</a></li>
<li class="scroll"><a href="#feature">ああああ</a></li>
<li class="scroll"><a href="#results">ああああ</a></li>
<li class="scroll"><a href="#voice">ああああ</a></li>
<li class="scroll"><a href="#faq">ああああ</a></li>
<li class="scroll"><a href="#intro">ああああ</a></li>
</ul>
</div>
</nav>
</header>


【CSS】
header{
position: fixed;
left: 0px;
top: 0px;
right: 0px;
z-index: 999;
height: 80px;
}

No.4 ベストアンサー 回答者： fufufunofufufu 回答日時： 2015/10/08 11:00

確認しました。

common.jsの４6行目から５１行目の
$(function(){
$(".scroll a").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});
これが犯人な気がします。
;が足りないのと、移動先の取得に不備があるので、スマホのブラウザだと動かなくなる。。。おそらく

$(function(){
$('.scroll a[href^=#]').click(function() {
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, 'slow', 'swing');
return false;
});
});

これに書き換えて、ダメだったらお手上げです。
一応、この違いで私もサンプルファイル作ってテストしてみたのですが、
前者のソースだとPC画面からは動くけど、スマホだとダメでした。

ただ怖いので、書き換え前のファイルはバックアップとってからためしてください。

この回答へのお礼

ありがとうございます！
確認いたしました。
書き換えましたが、ダメでした、、、。

＞これに書き換えて、ダメだったらお手上げです。

承知いたしました。
サンプルファイルまで作っていただき、
確認していただいて本当に感謝しております。

お礼日時：2015/10/08 15:03

No.3 回答者： fufufunofufufu 回答日時： 2015/10/07 20:32

>（※ヘッダー部分を固定にする前は、きちんと閉じていました。

）

これ見落としてました。
ではもともとは<a href="#●●></a>クリックしたら、#mainnaviは閉じていたってことですよね？
cssでヘッダーを固定したくらいでjsの動きがおかしくなるって、変ですね。
HTMLからjQueryで指定していた、クラスやID、ソースを削除しない限りそんなことはないのですが。
ただ、質問に書いてもらっているjQueryには<a href="#●●></a>クリックしたら、#mainnaviを閉じるっていうような内容のソースがないので、ほかにjqueryありますか？


>.scroll aの#で始まるリンクが飛ばなくなってしまいました。

あとaのサイト内リンクが利かなくなったのも変です。そんなことは指示していませんし。
何かが悪さしている感じ。
あとjqueryのバージョンが古い場合もあるので、バージョンによってはtouchstartは微妙かもなので、その場合はtouchstartは削除してください。



ちなみに、サイト内リンク<a href="#●●></a>をクリックしたときに、スムーススクロールで移動してますか？
もしそうならそのあたりもjsが絡んできているので、どんなソースで書いているのか気になりますね。


もともとのヘッダーを固定する前は動いていたのなら、一度修正前の状態に戻して、ヘッダーの固定の際に余計なものを消していないか再確認したほうがよいかもしれません。

頑張ってください。

この回答へのお礼

ご返信ありがとうございます。

＞ではもともとは<a href="#●●></a>クリックしたら、#mainnaviは閉じていたってことですよね？
はい、そうなんです。

＞ちなみに、サイト内リンク<a href="#●●></a>をクリックしたときに、スムーススクロールで移動してますか？
はい、もともとはスムーススクロールで移動していました。

実はこちらレスポンシブで制作しているのですが、（お伝えしておらず、申し訳ないです。）
CSSを見たところ、PCで見たときは#mainnaviにdisplay: block;、スマホで見たときは#mainnaviにdisplay: none;の指定を入れております。こちらが関係しているような気がします、、

上記説明だけでは、わかりずらいかもしれないので、よろしければ以下URLの実際のサイトをご覧ください。
http://www.gr-i.jp/gakukansetsu/
サイトをPCで幅を狭くしてスマホと同じ幅にすると、頂いたソースの設置によって動きがばっちりなのですが、実際にスマホ（iphone、android共に）で見ると、リンクに飛びません。


もしアドバイス頂けることございましたら、大変助かります。
こちらでも引き続き、検証してみます。
本当にありがとうございます。

お礼日時：2015/10/07 22:35

No.2 回答者： fufufunofufufu 回答日時： 2015/10/07 14:59

#toggleをクリックで#mainnaviが開いたり閉じたりっていう挙動で合ってますか？

で、それを#toggleクリック以外で、<li class="scroll"><a href="#●●●">●●●</a></li>クリック時もとじるようにしたい。という理解でいいですかね？

$(function(){
$(".scroll a[href^=#]").on("click touchstart", function(){
if($("#mainnavi").css({"display" : "block"})){
$("#mainnavi").slideUp();
}
});
});

【説明】
.scroll aの#で始まるリンクを、クリックもしくはスマホサイトなのでタッチすると、
#mainnaviが、”display:block”になっている（.slideToggle()は開いているときはhtml上で”display:block”扱いなので）時に限り、
#mainnaviを.slideUp()する。

これでできると思います。

というか、質問するときはきちんと情報を書いて質問しましょう。
私の回答も挙動を予測して、それに対してなので、もしかしたら違うかもしれません。
ソースのどこをどうしたらどういう挙動をするかということと、あと余計なソースは省く！

頑張ってください。

この回答へのお礼

回答いただき、ありがとうございます！
頂いたソースを設置したところ、#toggleをクリック時も#mainnaviが閉じるようになったのですが、
.scroll aの#で始まるリンクが飛ばなくなってしまいました。
なぜか教えて頂けますと幸いです。

私のつたない質問にも答えて頂き、大変感謝いたします。
以後、質問する際には、気を付けます。
ありがとうございます。

お礼日時：2015/10/07 17:23

No.1 回答者： yambejp 回答日時： 2015/10/06 22:37

クリックしたタグが開いていたら閉じる、

閉じていたら、ほか全部を閉じてから開く