メニューバーに高さを持たせない

前提・実現したいこと

ボタンを押したら開くようなメニューバーを作成中で、表示の転換はできるようになりました。
しかし、そののちに続きを書こうとするとコンテンツ自体にも高さがついてることが分かりました。
メニューバーを開いていないときは高さを持たないようにしたいです。。。

該当のソースコード

html
1 <img src="" id="headermenu" '">
2↑メニュー用ボタン
3  <div id="menucontents">
4コンテンツ
5    <div id="forforclose">
6     <img src="" id="forclose">
7     <p id="forclosetext">CLOSE</p>
8    </div>
9↑しめるためのボタン
10   </div>

css
1#headermenu {
2 width: 8%;
3 float: right;
4 cursor: pointer;
5 z-index: 1;
6}
7
8#menucontents {
9 background-color: rgba(255, 255, 255, 1);
10 visibility: hidden;
11 opacity: 0;
12 height: 0px;
13}
14
15.open #menucontents {
16 visibility: visible;
17 opacity: 1;
18 height: auto;
19}

jquery
1$(function () {
2 var $body = $('body');
3 $('#headermenu').on('click', function () {
4  $body.toggleClass('open');
5 });
6 $('#forforclose').on('click', function () {
7  $body.removeClass('open');
8 });
9});

試したこと

とりあえずコンテンツのdivにｃｓｓで高さ０にしたんですがきいてないようです。。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

質問内で触れられたように、もう一個のメニューがほかのところに重なっていることに気づきませんでした。そこでもう一個のメニューも同じように高さを持たせないように設定しました。

投稿2019/10/22 09:02

jouson-129

総合スコア16

jouson-129

2019/10/22 09:06

解決方法を書こうとしたのですが、場所を間違えました、、、 8zcaさんのコメントで解決できました。。。

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

ベストアンサー

目的の動作を行うのでしたら、jQueryにtoggleがあるのでそれを利用するのが簡単かと思います。
#headermenuがクリックされたら#menucontentsをtoggleさせるかたちです。
（toggleの場合はdisplayを切り替えるので、visibilityで操作したい理由がなければですが）

参考）
http://semooh.jp/jquery/api/effects/toggle/_/

投稿2019/10/22 02:26

8zca

総合スコア559

jouson-129

2019/10/22 03:58

```jQuery $(function () { var $body = $('body'); $("#headermenu,#forforclose").on('click', function () { $("#menucontents").toggle(); }); }); ``` ```css #headermenu { width: 8%; float: right; cursor: pointer; z-index: 1; } #menucontents { background-color: rgba(255, 255, 255, 1); visibility: visible; opacity: 1; height: auto; } ``` コメントを参考にして変えたところ、高さを持たなくなったのですがメニューバーを消すためのボタン（＃forforclose）を押しても聞かなくなってしまいました。。。これはtoggle以外で治すべきでしょうか？