トグルメニューを開いたまま画面幅を広げブレイクポイントを超えるとリンクのテキストのみが表示されたままになる。

発生している問題・エラーメッセージ

トグルメニューを開いたまま画面幅を広げ、ブレイクポイントを超えるとリンクのテキストが表示されたままになります。
これを画面幅が一定以上になるとリンクテキストが残らないようにしたいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link rel="stylesheet" href="css/reset.css">
9    <link rel="stylesheet" href="css/service1.css">
10    <title>SERVICE1</title>
11</head>
12<body>
13    <header>
14        <div class="flex-md-row align-items-center hf-box justify-content-between">
15            <h5 class="mr-md-auto com">Company</h5>
16            <nav>
17                <a class="text-dark home" href="home.html">Home</a>
18                <a class="text-dark info" href="info.html">会社情報</a>
19            </nav>
20            <a class="btn-top cont" href="contact.html">お問い合わせ</a>
21　　　　　　　<!--トグルメニュー-->
22            <div class="toggle-menu">
23                <ul class="toggle-bar">
24                    <li></li>
25                    <li class="center-bar"></li>
26                    <li></li>
27                </ul>
28            </div>  
29            <!--トグルメニュー-->    
30        </div>
31    </header>
32    <section class="section-top_navy">
33        <!--メニュー-->
34        <div class="toggle-filter">
35            <ul class="filter-menu">
36                <li><a href="home.html">Home</a></li>
37                <li><a href="info.html">会社情報</a></li>
38                <li><a href="contact.html">お問い合わせ</a> </li>
39            </ul>
40        </div>
41        <!--メニュー-->      
42        <div class="work-image_navy">
43            <p class="work-image-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
44        </div>
45    </section>
46
47    <div class="section-md_photo">
48        <div class="work-image">
49            <p class="work-image-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
50        </div>
51    </div>
52    <section class="service1">
53        <h1>SERVICE1</h1>
54        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p>
55        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p>
56        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p>
57        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
58    </section>
59    <div class="section-bt_photo">
60        <div class="work-image">
61            <p class="work-image-text_black">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
62        </div>
63    </div>
64
65    <section class="service1_desc">
66        <h2>見出し</h2>
67        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p>
68        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p>
69        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.<br><br></p>
70        <p class="section-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
71        <a class="btn-top buttom-cont" href="contact.html">お問い合わせ</a>
72    </section>
73    <footer>
74        <div class="d-flex flex-column flex-md-row align-items-center hf-box">
75            <a href="privacy.html"><h5 class="mr-md-auto prv">プライバシーポリシー</h5></a>
76        </div>
77    </footer>
78
79    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
80    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
81    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
82    <script src="js/script.js"></script>
83</body>
84</html>

css
1html {
2    font-size: 15px;
3}
4body {
5    width: 100%;
6    font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro";
7}
8header, footer {
9    background-color: #eee;
10}
11.hf-box {
12    height: 100px;
13    padding: 0 152px;
14    display: flex;
15}
16.btn-top {
17    background-color: #03004c;
18    color: #fff;
19    width: 170px;
20    height: 50px;
21    border-radius: 10px;
22    display: flex;
23    justify-content: center;
24    align-items: center;
25}
26.btn-top:hover {
27    color: #fff;
28    background-color: #0903c9;    
29}
30.toggle-menu {
31    display: none;
32}
33.toggle-filter {
34    display: none;
35}
36.toggle-menu {
37    display: none;
38}
39a:hover {
40    text-decoration: none;
41    opacity: 0.7;
42}
43.com {
44    font-size: 30px;
45}
46.home {
47    font-size: 24px;
48    margin-right: 40px;
49}
50.info {
51    font-size: 24px;
52    margin-right: 55px;
53}
54.cont {
55    font-size: 20px;
56}
57.cont:hover {
58    text-decoration: none;
59}
60
61@media screen and (max-width:960px) {
62    .toggle-menu {
63        display: block;
64        background-color: #03004c;
65        width: 50px;
66        height: 50px;
67        padding: 5px;
68        border-radius: 10px;
69        display: flex;
70        justify-content: center;
71        align-items: center;
72    }
73    .toggle-bar > li{
74        width: 38px;
75        height: 6px;
76        background-color: #fff;
77        list-style: none;
78    }
79    .center-bar {
80        margin: 7px 0;
81    } 
82    nav, 
83    .btn-top {
84        display: none;
85    }   
86    .toggle-filter {
87        display: none;
88        width: 100%;
89        height: 130px;
90        padding: 10px 0;
91        font-size: 1.5rem;
92        text-align: center;
93        justify-content: center;
94        align-items: center;
95        background-color: rgba(255,255,255,0.9);
96        position: absolute;
97    }
98    .filter-menu {
99        list-style: none;
100    }
101    .filter-menu > li:nth-child(2n) {
102        margin: 20px 0;
103    }
104    li > a {
105        color: #000;
106    }
107}
108@media screen and (max-width:768px) {
109    header,
110    section,
111    footer {
112        padding: 0 40px;
113    }
114    .toggle-filter {
115        display: none;
116        left: 0;
117    }
118}

javaScript
1$(function(){
2    $('.toggle-menu').click(function() {
3        $('.toggle-filter').slideToggle();
4    });
5    
6    //画面幅が960px以上になったとき、$('.filter-menu')（リンクテキスト）を非表示にする
7    //これが効きません
8    var windowWidth = $(window).width();
9    var breakPoint = 960;
10    if(windowWidth > breakPoint){
11        $('.filter-menu').hide();
12    };
13
14});

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

回答1件

原因は .slideToggle() でインラインスタイルが残っているため
……なのですが、Bootstrap を使っているのであれば、わざわざ改めて実装する必要はなく、Navbar を使えばいいのでは？
https://getbootstrap.com/docs/4.2/components/navbar/

投稿2019/03/15 06:08