リキッドデザインでブラウザ幅を変えた時の挙動

リキッドデザインによるサイト制作を実戦で体当たり勉強中です。
jsとcssで作ったグローバルメニューについて相談させてください。

PC幅（768px以上）で横並びになっているメニューを、
ブラウザ幅を縮めてSP幅（767px以下）にした時は、
横並びメニューを一旦消して、「閉じたアコーディオンメニュー」に変更するというものを作っています。
この時に起こる挙動２点が解消できなくて悩んでいます。

１）
SP幅のアコーディオンを一度開き、また閉じて、その後ブラウザをPC幅に戻すと、
PC幅で見えていた横並びメニューが消えてしまいます。

２）
SP幅のアコーディオンを開いたまま、ブラウザをPC幅に戻すと、
アコーディオンがそのまま横に伸びた体裁で表示されてしまいます。
（PC幅のデザインに戻らない）

以上です。
何かtipsがあれば教えていただけたら助かります。
宜しくお願いします。

kei344

2019/03/22 16:47

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を質問文に追記されたほうが回答を得やすいと思います。

369freaky

2019/03/24 02:26

ありがとうございます！公開に支障のない程度にソースを整理して追記することにします。

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

回答1件

PCとSP幅でのスタイルの表示・非表示の切替ができていないのではないでしょうか。
記述したコードを見ていないのでわかりませんが、CSSのメディアクエリでスタイルを切り替えているなら下記のように記述すれば、表示・非表示の設定ができます。
CSSのクラス名は仮ですが、767px 以下なら、sp_nav は表示、pc_nav は非表示にして、768px 以上なら、sp_nav は非表示、pc_nav は表示します。

css
1.sp_nav { display: block; }
2.pc_nav { display: none; }
3
4@media screen and (min-width : 768px) {
5	
6    .sp_nav { display: none; }
7    .pc_nav { display: block; }
8	
9}