Question

我的jQuery移动菜单在小型设备上切换，但我希望它在浏览器达到一定宽度时消失。它在您刷新浏览器时有效，但实际上并不是因为您实际更改了浏览器宽度。我已经包含了一个指向codepen的链接，任何帮助都将不胜感激！

HTML

    //User clicks p tag named "#hour1". 
$(document).ready(function(){

    $("document").on('click', "#hour1", function( event ){
        $("#hour1").remove();
        $("#hour1Data").append("<input id='hour1Input' type='text'/>");
    });
    });

//On Second click, input box is sent back to data box.
$(document).ready(function(){
    $("document").on("click", "#hour1Input", function( event ){
        $("#hour1Input").remove();
        $("#hour1Data").append("<p id='hour1'><?php echo $hour1; ?></p>");
    });
});

CSS

       <header>    
        <div class="hamburger"><a href="#nav">&equiv;</a></div>
        <div class="logo">
           <img src="img/logo.png" alt="photographer logo">
        </div><!--end .logo-->
            <div class="">  
              <ul class="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Investment</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
              </ul> 
            </div>

        <div id="mobileMenu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Investment</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>

的jQuery

header {
margin: 1em 0;
}
.logo {
display: inline-block;
margin-left: 16%;
}
.logo img {
width: 200px;
}
.hamburger {
display: inline-block;

margin-left: 1rem;
}
.hamburger a {
text-decoration: none;
color: #7f8c8d;
font-size: 36px;
}

#mobileMenu {
display: none;
width: 96%;
}

#mobileMenu ul {
list-style-type: none;
padding-left: 20px;
}

#mobileMenu li {
padding: 4px 0 4px 0;
border-bottom: 1px solid #7f8c8d;
}

#mobileMenu a {
text-decoration: none;
text-transform: uppercase;
color: #7f8c8d;

}

@media screen and (max-width: 1024px) {

.menu {
    display: none;
}

}

@media screen and (min-width: 1025px) {

.hamburger,
#mobileMenu {
    display: none;
}

.menu {
    list-style-type: none;
}
ul.menu {
    float: right;
    margin-right: 10%;
}
.menu li {
    float: left;
}
.menu li a {
    text-decoration: none;
    padding: 0 15px;
    color: #7f8c8d;
    font-size: .75rem;
    text-transform: uppercase;
    border-right: solid 1px gray;
}
.menu li:last-child {
    border-right: none;
}

.logo {
    float: left;
}
.logo img {
    margin: 0 auto;
}

}

Answer 1

你可以尝试＆＃34; .resize（function（）＆＃34;响应函数如下：

$(window).resize(function(){

});

Answer 2

如果您希望在调整浏览器窗口大小时隐藏响应式菜单，只需将其添加到您的jQuery中。

$(window).resize(function(){
  $("#mobileMenu").hide();
})

在此工作的示例

http://codepen.io/jcoulterdesign/pen/RadwMr

或使用媒体查询

@media screen and (max-width:600px){ 
    #mobileMenu { 
        display: none !important; 
    } 
}

当窗口大小增加时，jQuery移动菜单不会消失

2 个答案: