如何禁用javascript像媒體查詢maxwidth 751px

我已經寫了一個網頁與負責任的設計，可以點擊的菜單 - 我想這會消失，當我把瀏覽器窗口變成desktopmode，但無法使它的工作，我知道這應該是某種方式把它包起來，但不能讓它work`如何禁用javascript像媒體查詢maxwidth 751px

我的HTML：

<div> <a href="#" title="cart"> <img src="img/svg/cart_icon.svg" alt="cart"></a> <a href="#" title="Search"> <img src="img/svg/search_icon.svg" alt="Search"></a> <a href="#" title="Log in"> <img src="img/svg/log_in.svg" alt="Log In"></a> </div> 
    <div class="logotype"><a href="index.html"> <img src="img/svg/k_logo.svg" alt="K"></a> </div> 
    <div> 
    <nav id="MainNavigation"> <a href="#" id="menuIcon"><img src="img/svg/menu_icon.svg" alt="Menu icon"></a> <a href="contact.html" id="contactUs"><img src="img/svg/contact_icon.svg" alt="Contact us"></a> 
     <ul id="dropDownMenu"> 
     <li> <a href="index.html" title="Home">Home</a></li> 
     <li> <a href="women.html" title="Women" id="womenId">Women</a> <a href="#" class="Sub_Menu_Link"><span class="float_Right"><img src="img/svg/Sub_menu_expander.svg" alt="+"></span></a> 
      <ul class="sub_Menu"> 
      <li><a href="gallery.html">Coats</a> </li> 
      <li><a href="gallery.html">Tops</a> </li> 
      <li><a href="gallery.html">Dresses</a> </li> 
      <li><a href="gallery.html">Trousers</a> </li> 
      <li><a href="gallery.html">Shoes</a> </li> 
      </ul> 
     </li> 
     <li> <a href="#" title="Men" id="menId">Men</a> <a href="#" class="Sub_Menu_Link"><span class="float_Right"><img src="img/svg/sub_menu_expander.svg" alt="+"></span></a> 
      <ul class="sub_Menu"> 
      <li><a href="#">Coats</a> </li> 
      <li><a href="#">Tops</a> </li> 
      <li><a href="#">Dresses</a> </li> 
      <li><a href="#">Trousers</a> </li> 
      <li><a href="#">Shoes</a> </li> 
      </ul> 
     </li> 
     <li><a href="#" title="Sale">Sales</a></li> 
     <li><a href="contact.html">Contact us</a></li> 
     <li><a href="#">Log in</a></li> 
     </ul> 
    </nav> 
    </div> 
    <hr> 
</header>

CSS：

#pageHeader { 
    position: fixed; 
    display: block; 
    background: white; 
    z-index: 1; 
    width: 100%; 
    top: 0; 
    margin-bottom: 0; 
} 
.logotype img { 
    display: block; 
    width: 40px; 
    height: 50px; 
    margin: 0px auto; 
} 
#pageHeader img{ 
    width: 30px; 
    height: 40px; 
    } 
#pageHeader div { 
    float: right; 
    width: 33.33%; 
} 
#pageHeader div:first-of-type a { 
    position: relative; 
    float: right; 
    padding-right: 20px; 
    top:5px; 
} 
#pageHeader div:first-of-type a::after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 
#pageHeader div::after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 
#pageHeader nav>a { 
    display: block; 
    padding: 0 0 0 20px; 
    position: relative; 
    top: 10px; 
} 
#pageHeader nav ul.open { 
    display: block; 
} 
#pageHeader nav ul ul.open { 
    display: block; 
} 
#pageHeader nav ul li a { 
    color: #161212; 
} 
#pageHeader nav ul { 
    display: none; 
    ; 
} 
#pageHeader nav ul ul { 
    position: relative; 
    display: none; 
} 
#pageHeader nav >ul a { 
    padding: 0px 0px 0px 0px; 
} 
#pageHeader nav ul ul a { 
    padding: 0 0px 0 0px; 
} 
#pageHeader nav>ul { 
    margin: 0; 
    padding: 0 20px; 
    float: left; 
    line-height: 40px; 
    background: #fff; 
    width: 40%; 
    position: absolute; 
} 
#pageHeader nav ul ul { 
    background: #fff; 
    width: 100%; 
} 
#pageHeader hr { 
    border: 0; 
    clear: both; 
    display: block; 
    width: 100%; 
    background-color: #ccc; 
    height: 1px; 
} 
.Sub_Menu_Link { 
    line-height: 1px; 
} 
.Sub_Menu_Link:after { 
    content: ""; 
    display: block; 
    visibility: hidden; 
    clear: both; 
} 
.float_Right img { 
    width: 10px; 
} 
.float_Right { 
    float: right; 
} 
.float_Right:after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 

/* förändard */ 
#MainNavigation ul >li a { 
    font-size: 1.2rem; 
    color: #000; 
} 
#MainNavigation ul ul>li a { 
    color: #000; 
    line-height: 1px; 
    font-size:.9rem;

的Javascript

// JavaScript Document 
$(document).ready(function(){ 
"use strict"; 


    $("nav>a").on("click", function(){ 

    $("nav > ul").toggleClass("open"); 
    }); 


    $(" .Sub_Menu_Link").on("click", function(){ 
      $(this).next().toggleClass("open"); 
      });    
});

MediaQ公司

@media (min-width:751px) { 
/*-- generic settings --*/ 
#pageContainer { 
    width: 80%; 
    margin: 0px auto; 
} 
/*-- main #pageHeader --*/ 

#pageHeader { 
    position:relative; 
    display:block; 
} 

#pageHeader> div a:nth-child(3) { 
    display: block; 
} 
    #MainNavigation{ 
    width:100%; 

    } 
    #MainNavigation ul{ 
     background:red; 
    } 

#MainNavigation >a:first-of-type { 
    display: none; 
} 


#dropDownMenu li:hover ul { 
    display: block; 

} 

.sub_Menu { 
    position: absolute; 
    display: none; 
    width: 20%; 
    text-align: left; 
    z-index: 1; 

} 

#pageHeader { 
    width: 80%; 
    margin: 2% auto 0; 
} 
#contactUs { 
    display: block; 
} 
#pageHeader div:first-of-type a { 
    padding: 0px 0px 0 20px; 
} 
#pageHeader nav>a { 
    display: block; 
    padding: 0 0 0 0px; 
}

來源

2017-03-07 Patrik

不知道你的意思是「我想這是走了」。你的意思是你上面包含的所有HTML嗎？另外，當你說桌面時，你指的是尺寸還是非觸摸設備？

如果您是指大小，我只需添加一個最小寬度媒體查詢並將display：none屬性添加到包裝元素的類或ID。

如果你的意思是非觸摸，我會使用像Modernizr這樣的東西來執行觸摸檢測。如果條件爲false，則可以使用腳本向wrapping元素添加類名。那個classname也會在你的CSS中顯示：none屬性。

編輯：如果你想簡單地禁用腳本在某個轉折點單擊處理程序，在條件將它們包裝：

$(document).ready(function(){ 
"use strict"; 
    var breakPoint = 751; 
    if ($(window.width() >= breakPoint) { 
     $("nav>a").on("click", function(){ 

      $("nav > ul").toggleClass("open"); 
     }); 

     $(" .Sub_Menu_Link").on("click", function(){ 
      $(this).next().toggleClass("open"); 
     }); 
    } 
});

（未測試）

來源

2017-04-11 23:38:13

如何禁用javascript像媒體查詢maxwidth 751px

回答

相關問題