slideToggleの動きがおかしい

スマホのメニュー部分を作成しているのですが、slideToggleが正常に動かなくて困っています。

https://output.jsbin.com/cozivalibi/1
こちらに展開したのですが、やりたいことは「メニュー」をクリックしたらメニューが開くようにしたいです。
現在、動きは問題ない（開くときにぬるっと開かないのもちょっとおかしいですが）ように見えますが、最初からメニューが開いているとおかしいので、
article#sidenav_sp
をdisplay:none;
に設定すると動かなくなります。
https://output.jsbin.com/bupuqemiro

上記URLとの違いは
article#sidenav_spのdisplay:noneだけです。

原因などわかりましたらご教示いただければと思います。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/12/03 10:27

PCのローカル環境でざっと動かしてみただけなので、CSS等はほとんど理解してませんが・・・

ご提示のものは、結果的に「閉じたら終わり」というものになっていませんか？

＞現在、動きは問題ない～～
とおっしゃってますが、それならアップしたソースが違ってるってことはありませんか？
アップされているものは、閉じるほうのトリガーはありますが、開く方のトリガーがないので、
　$(".onmenusp").click(function(){
　　$('article#sidenav_sp').slideToggle();
　});
が動作していないように見受けられます。


具体的な対処法として、開くトリガーのつもり（？）と思われる「メニュー」の部分にクラス設定をしてみてください。
また、当該部分がリンク要素になっていますので、（↑）のスクリプトのままですと、スクリプトの処理後にブラウザがリンク動作を行います。

これを中止したいのであれば、
　event.preventDefault()
等を実行するようにしてみてください。
http://api.jquery.com/event.preventDefault/

＞開くときにぬるっと開かないのもちょっとおかしいですが～～
当方では再現できませんでしたが、この原因はブラウザのリンク動作ではないかと推測します。

この回答へのお礼

すいません。元のソースが書き換えられたようです^^;
ですがですが、
> 当該部分がリンク要素になっていますので、（↑）のスクリプトのままですと、スクリプトの処理後にブラウザがリンク動作を行います。
がビンゴでした。
ちょっと他のサイトのソースを引っ張ってきた関係で、リンク要素が残っていたのですが、結局押した後にリロードされてメニューが開かない、と勘違いしていました。恥ずかしい。。。

どうもありがとうございました。一日悩みましたがこちらに質問してよかったです！

お礼日時：2015/12/03 10:58