クリックで開く閉じるボタンを押すと.openが外れますが、メニュー内のコンテンツが消えてくれません。

クリックで開くハンバーガーメニューを作っています。
閉じるボタンを押すと.openが外れますが、メニュー内のコンテンツが消えてくれません。

クリックすると、インラインにdisplay: blockが入ってしまうのですがなぜこうなるのでしょうか？

手探りでやっているためコードが乱雑で恐縮ですが、ご教授いただけると幸いです。

該当のソースコード



.scroll-prevent {
	height: 100vh;
	overflow: hidden;
}
.collapse::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }
.collapse::-webkit-scrollbar{
 -ms-overflow-style:none;
}

html {
	margin: 0;
	padding: 0;overflow-y: scroll;
}

.afterClear {
	overflow: hidden
}
.afterClear:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden
}
.flexbox {
	display: flex;
	justify-content: space-between;
}
#wrapHead .flexbox {
	padding: 0 20px;
}
#wrapHead ul.gNav li {
	display: inline-block;
	text-align: center;font-size: 0.875rem;
}
#wrapHead ul.gNav li a {
	display: block;
	padding: 10px 20px;
	text-align: center;font-weight: bold;
}
#wrapHead ul.gNav li span.act a {
	position: relative;
	color: #ee781f;
}
#wrapHead ul.gNav li a:hover, .wrapM ul li a:hover {
	color: #ee781f;
	text-decoration: none;
}
#wrapHead ul.gNav li span.act a:before {
	position: absolute;
	content: "";
	display: block;
	width: 1px;
	height: 60px;
	background-size: 1px auto;
	top: -60px;
	left: 0;right: 0;margin: auto;
}

@media(max-width: 767px) {
#nav-open {
	margin: 0 0 0 auto;
  display: block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
cursor: pointer;
z-index: 9999;position: absolute;
	right: 20px;
	top: 20px;
	
}
.stickey {
	background-color: #FCE8F2;
	padding: 10px;
	height: 160px;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  transition: all 0.2s;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #232b33;
  display: block;
  content: '';
  cursor: pointer;
  z-index: 9999;
}

#nav-open span:before {
  bottom: -8px;
}

#nav-open span:after {
  bottom: -16px;
}
#nav-content {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: 0.3s ease-in-out;margin: 0;
}

#nav-content.open {
  display: block;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 143, 0.9);
  overflow: hidden;
overflow-y: scroll;-webkit-overflow-scrolling: touch;
}

#nav-content.open:before {
  content: '';
  overflow: hidden;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  z-index: -1;
}
.hamburger-top {
  height: 10rem;
}
	.category li {
		text-align: center;
	}
	.category li a:hover {
		background-color: rgba(92,121,153, 0.5);
	}
.category-title {
  padding: 0.5rem;
}

.category-title a {
  color: #fff;
}

#nav-open.active span {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
#nav-open.active span:before {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
  opacity: 0;
}
#nav-open.active span:after {
  -webkit-transform: translateY(-16px) rotate(45deg);
  transform: translateY(-16px) rotate(90deg);
}
}
.navbar-toggler {border: none;}
/*.navbar-toggler-icon {
	background-color: #eee;初期ハンバーガー
}*/
.container {
	max-width: inherit;padding: 0 20px;
}
.navbar {padding: 0 ;}

.navbar-collapse, .navbar-nav {
	text-align: right;
}
.navbar-nav {
	margin: 0 0 0 auto;
}
.navbar ul.under {
	display: none;
}
#wrapHead .navbar ul.under li {
	display: block;font-size: 0.7rem;
}
.navbar ul.under li > span {
	color: #ee781f;font-weight: bold;
}
@media(max-width: 767px) {
	.container {
		width: 100%;
	}
	#wrapHead {
		padding: 0;
		position: fixed;z-index: 9999;
		width: 100%;
	}
	#wrapHead .navbar{
		padding: 20px 0;width: 100%;
	}
#wrapHead .navbar ul.under li {
	display: block;
	}
#wrapHead ul.gNav li span.act a {
	position: relative;
	color: #ee781f;
}
	.navbar-nav {
		
		overflow: auto;
		
	}
}
/**/
html.is-fixed,
html.is-fixed body {
    overflow: hidden; height: 100%;
}
html:not(.is-fixed) .modal-close{
	display: none;
}
html.is-fixed #nav-open {
	display: none;
}
.modal-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modal-bg.is-show {
    display: block;
}
.modal-contents {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 700px;
    height: 500px;
    transform: translate(-50%, -50%);
    background: #ffffff;
}
.modal-contents.is-show {
    display: block;
}
.modal-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
	z-index: 9997;
}
.modal-body {
    display: none;
}
.modal-body.is-show {
    display: block;
}
.modal-close {
    position: absolute;
    top: 0px;
    right: 0;z-index: 9999;
}

<script type="text/javascript">
jQuery(function ($) {
  $(function () {
    $(".modal-close").on("click", function () {
      i ($(this).hasClass("active")) {
        $(this).removeClass("active");
        $("#nav-content").removeClass("open").fadeOut(100);
      }});
	
}); 
</script>

	<script>
	$(function() {
    var scrollPos;
    $('.navbar-toggler').on('click', function() {
        scrollPos = $(window).scrollTop();
        var target = $(this).data('modaibody');
        $('.modal-bg').addClass('is-show');
        $('#' + target).addClass('is-show');
		$("#nav-content").fadeIn(100).addClass("open");
    });
    $('.modal-close').on('click', function() {
    	$('html').removeClass('is-fixed');
        $('.modal-bg').removeClass('is-show');
        $('.modal-body').removeClass('is-show');
			$(window).scrollTop(scrollPos);
		$("#nav-content").fadeIn(100).removeClass("open");
	
    });
});
	</script>
	<script type="text/javascript">
jQuery(function ($) {
  $(function () {
    $("#nav-open").on("click", function () {
      if ($('html').hasClass("is-fixed")) {
        $('html').removeClass("is-fixed");
        $("#nav-content").removeClass("open").fadeOut(100);
      } else {
        $('html').addClass("is-fixed");
      
      }
    });
  });
}); 
</script>

HTML
1
2
3HTML
4
5<!doctype html>
6<html>
7<head>
8<meta charset="utf-8">
9<meta name="viewport" content="width=device-width">
10<title>aaa</title>
11<meta name="keywords" content="">
12<meta name="description" content="">
13<link rel="stylesheet" href="css/bootstrap-4.0.0.css">
14<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
15</head>
16
17<body>
18
19
20<header>
21	<div id="wrapHead">
22
23<nav class="navbar navbar-expand-lg navbar-dark">
24<div class="modal-bg"></div>
25<div class="container">
26<p><a href="index.html"><img src="img/logo.png" alt="logo" width="165" height="34"></a></p>
27	 <div id="nav-open" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onClick="myFunc()">
28        <span></span>
29        </div> <button class="modal-close">閉じる</button>
30	<div class="collapse navbar-collapse" id="nav-content" data-modaibody="modal01"><div class="hamburger-top"></div>
31<ul class="gNav navbar-nav category">
32<li class="nav-item active"><span class="act"><a href="index.html">ホーム</a></span></li>
33<li class="nav-item"><a href="about/index.html">会社情報</a>
34	
35	
36	</li>
37
38</ul></div>
39</div></nav>
40</div>
41
42</header>
43	</body></html>
44
45

kei344

2020/04/28 08:45

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

n1sh1o

2020/04/28 08:57

不慣れですいません。修正いたしました。よろしければご確認ください。

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

回答1件

ベストアンサー

コードの中にコメントを入れました。

HTML
1<!-- このブロック削除
2<script type="text/javascript">
3jQuery(function ($) {
4  $(function () {
5    $(".modal-close").on("click", function () {
6      i ($(this).hasClass("active")) { // ifでは？
7        $(this).removeClass("active");
8        $("#nav-content").removeClass("open").fadeOut(100);
9      }});
10
11}); // }); がもうひとつ足りない
12</script>-->
13
14    <script>
15    $(function() {
16    var scrollPos;
17    $('.navbar-toggler').on('click', function() {
18        scrollPos = $(window).scrollTop();
19        var target = $(this).data('modaibody');
20        $('.modal-bg').addClass('is-show');
21        $('#' + target).addClass('is-show');
22        $("#nav-content").fadeIn(100).addClass("open");
23    });
24    $('.modal-close').on('click', function() {
25        $('html').removeClass('is-fixed');
26        $('.modal-bg').removeClass('is-show');
27        $('.modal-body').removeClass('is-show');
28            $(window).scrollTop(scrollPos);
29     // $("#nav-content").fadeIn(100).removeClass("open"); // ここで表示してしまっている
30        $("#nav-content").fadeOut(100).removeClass("open");
31
32    });
33});
34    </script>
35    <script type="text/javascript">
36jQuery(function ($) {
37  $(function () {
38    $("#nav-open").on("click", function () {
39      if ($('html').hasClass("is-fixed")) {
40        $('html').removeClass("is-fixed");
41        $("#nav-content").removeClass("open").fadeOut(100);
42      } else {
43        $('html').addClass("is-fixed");
44
45      }
46    });
47  });
48}); 
49</script>
50```**動くサンプル：**[https://jsfiddle.net/nuh4Lmva/](https://jsfiddle.net/nuh4Lmva/)
51
52---
53
54ちなみにscript要素は分割しても特に利点も無いので、まとめたほうが良いです。
55`$(function() {});`も複数個所に書く必要は無いと思います。
56
57```HTML
58<script>
59$(function() {
60  var scrollPos;
61  $('.navbar-toggler').on('click', function() {
62    scrollPos = $(window).scrollTop();
63    var target = $(this).data('modaibody');
64    $('.modal-bg').addClass('is-show');
65    $('#' + target).addClass('is-show');
66    $("#nav-content").fadeIn(100).addClass("open");
67  });
68  $('.modal-close').on('click', function() {
69    $('html').removeClass('is-fixed');
70    $('.modal-bg').removeClass('is-show');
71    $('.modal-body').removeClass('is-show');
72    $(window).scrollTop(scrollPos);
73    $("#nav-content").fadeOut(100).removeClass("open");
74  });
75  $("#nav-open").on("click", function () {
76    if ($('html').hasClass("is-fixed")) {
77      $('html').removeClass("is-fixed");
78      $("#nav-content").removeClass("open").fadeOut(100);
79    } else {
80      $('html').addClass("is-fixed");
81    }
82  });
83});
84</script>