如何在 maxwidth 751px 上禁用 javascript 之類的媒體查詢

Question

我寫了一個帶有響應式設計的導航菜單的網頁，以便能夠點擊 - 我希望當我將瀏覽器窗口轉換為桌面模式時它會消失，但無法使其工作，我知道它應該以某種方式包裝它但不能讓它工作`

我的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");
            });              
}); 

媒體Q

@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;
}

Answer 1

不確定“我希望它消失”是什么意思。 您是指上面包含的所有 HTML 嗎？ 另外，當您說桌面時，您是指尺寸還是非觸摸設備？

如果您的意思是尺寸，我只會添加一個最小寬度的媒體查詢並添加一個 display: none 屬性到包裝元素的類或 ID。

如果你的意思是非觸摸，我會使用像 Modernizr 這樣的東西來執行觸摸檢測。 如果條件為假，您可以使用腳本向包裝元素添加類名。 該類名也將在您的 CSS 中帶有 display: 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");
        }); 
    }
}); 

（未測試）

Answer 2

可以使用引導媒體查詢來檢測設備的大小以獲取更多詳細信息，

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp