如何使 JavaScript 函数仅在桌面上工作

Question

我创建了一个 JavaScript 函数，它在每个菜单名称下显示一个下划线，但我希望这个函数只能在桌面上运行。

我尝试使用此功能，但由于某种原因它不起作用，因此我决定将其删除。 请让我知道这样做的正确方法。 这是我在 w3schools 上找到的代码功能。

 function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

这是我使用上面看到的代码之前的原始代码。

 (function() { const target = document.querySelector(".target"); const links = document.querySelectorAll(".mynav a"); const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"]; function mouseenterFunc() { if (!this.parentNode.classList.contains("active")) { for (let i = 0; i < links.length; i++) { if (links[i].parentNode.classList.contains("active")) { links[i].parentNode.classList.remove("active"); } links[i].style.opacity = "0.25"; } this.parentNode.classList.add("active"); this.style.opacity = "1"; const width = this.getBoundingClientRect().width; const height = this.getBoundingClientRect().height; const left = this.getBoundingClientRect().left + window.pageXOffset; const top = this.getBoundingClientRect().top + window.pageYOffset; const color = colors[Math.floor(Math.random() * colors.length)]; target.style.width = `${width}px`; target.style.height = `${height}px`; target.style.left = `${left}px`; target.style.top = `${top}px`; target.style.borderColor = color; target.style.transform = "none"; } } for (let i = 0; i < links.length; i++) { links[i].addEventListener("click", (e) => e.preventDefault()); links[i].addEventListener("mouseenter", mouseenterFunc); } function resizeFunc() { const active = document.querySelector(" .mynav li.active"); if (active) { const left = active.getBoundingClientRect().left + window.pageXOffset; const top = active.getBoundingClientRect().top + window.pageYOffset; target.style.left = `${left}px`; target.style.top = `${top}px`; } } window.addEventListener("resize", resizeFunc); // Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - START document.querySelector(".mynav").addEventListener("mouseleave", function() { target.removeAttribute("style"); }) // Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - END })(); /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap'); /* YELLOW - #f7c51e GREY - #363636 background white - #f6f6f6 */ * { box-sizing: border-box; margin: 0; padding: 0; } .color-overlay-container { justify-content: center; align-items: center; position: relative; } .color-overlay { width: 100%; height: 100%; background: #000; opacity: .5; z-index: 2; position: absolute; } .btn-black{ padding: 1.5rem 2rem; color: white; background: black; text-transform: uppercase; font-weight: 900; } .btn-yellow{ padding: 1.5rem 2rem; color: white; background: #f7c51e; text-transform: uppercase; font-weight: 900; } body { font-family: 'Roboto', sans-serif; line-height: 1.4; } a { text-decoration: none; } p { margin: .5rem 0; } /* Utility Classes */ /* Grid Container */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1rem; margin: auto; grid-auto-rows: minmax(200px, auto); } .grid-container-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1rem; margin: auto; } .card { background: #fff; padding: 1rem; } /* Grid Container - END */ .container { max-width: 1404px; margin: auto; padding: 0 2rem; overflow: hidden; } .text-center { text-align: center; } .text-yellow { color: #f7c51e; } .bg-yellow { background: #f7c51e; color: black; } .bg-grey { background: #f9f9f9; color: black; } .l-heading { font-weight: bold; font-size: 4rem; margin-bottom: 0.75rem; line-height: 1.1; } .m-heading { font-size: 2rem; margin-bottom: 0.75rem; line-height: 1.1; } .lead { font-size: 1.3rem; margin: 0.75rem 0; } /* Padding */ .py-1 { padding: 1.5rem 0; } .py-2 { padding: 2rem 0; } .py-3 { padding: 3rem 0; } /* All Around Padding */ .p-1 { padding: 1.5rem; } .p-2 { padding: 2rem; } .p-3 { padding: 3rem; } /* Utility Classes - END */ /* ================ HOME PAGE ==================== */ /* HEADER */ .site-header { background-color: transparent; } .site-header .header-container { background: black; color: white; } /* BLACK BAR */ .site-header .header-container .header-container_wrap { padding: 30px 5px; /* background: red; */ } #masthead .header-container .header-container_wrap .items { display: flex; } #masthead .header-container .header-container_wrap .items .contact-info { display: flex; } #masthead .header-container .header-container_wrap .items .quality-logo { margin-right: 3rem; line-height: 5px; } #masthead .header-container .header-container_wrap .items .quality-logo p { font-size: 14px; } #masthead .header-container .header-container_wrap .items .item { display: flex; align-items: center; margin-right: 1rem; } #masthead .header-container .header-container_wrap .items .item { display: flex; align-items: center; margin-right: 1rem; } #masthead .header-container .header-container_wrap .items .item .facebook-like { text-align: center; } #masthead .header-container .header-container_wrap .items .item .fas { font-size: 18px; color: #f7c51e; margin-right: 1.5rem; } #masthead .header-container .header-container_wrap .items .contact-info .item .fas { font-size: 18px; color: #f7c51e; margin-right: 1.5rem; background: black; border-radius: 50%; padding: 10px; border: 1px solid #363636; } /* ========================== Bottom White Header Menu - START ================ */ /* Menu Underline */ .mynav a { display: block; font-size: 20px; color: black; text-decoration: none; padding: 7px 15px; } .target { position: absolute; border-bottom: 4px solid transparent; z-index: 100; transform: translateX(-60px); pointer-events: none; } .mynav a, .target { transition: all .35s ease-in-out; } /* Add a black background color to the top navigation */ .topnav { background-color: white; overflow: hidden; padding: 1rem; } #myTopnav .items { display: flex; justify-content: space-between; align-items: center; } #myTopnav .items .item .mynav ul{ display: flex; align-items: center; } #myTopnav .items .item .mynav ul li{ display: flex; align-items: center; } #myTopnav .items .item .mynav ul li:nth-child(4){ margin-left: .5rem; /* background-color: red; */ } /* Style the links inside the navigation bar */ .topnav a { /* float: left; display: block; */ color: rgb(94,94,94); text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; text-transform: uppercase; font-weight: 600; } /* Add an active class to highlight the current page */ /* .active { color: black; font-weight: 600; color: #363636; } */ /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* ============================ DROP DOWN MENU =============================== */ /* Dropdown container - needed to position the dropdown content */ .dropdown { /* float: left; */ overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: rgb(94,94,94); padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; } /* Style the dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f7c51e; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; color: rgb(94,94,94); } /* Style the links inside the dropdown */ .mynav .dropdown-content a { font-size: 14px; font-weight: 500; float: none; color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; text-transform: uppercase; } /* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { /* background-color: red; */ color: black; } /* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { /* background-color: red; */ color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; z-index: 101; } /* SEARCH ICONS */ #myTopnav .items .item .fa-search{ font-size: 1.25rem; color: #363636; } /* ========================== Bottom White Header Menu - END ================ */ @media screen and (max-width: 600px) { /* ================== Top Black Bar ============= */ /* ================ WHITE MENU NAVBAR DROPDOWN - START ============ */ .topnav { display: flex; justify-content: center; } .topnav .hamburger { display: flex; align-items: center; } .topnav a, .dropdown .dropbtn { display: none; } .topnav ap { margin-right: 1rem; } .topnav a.icon { display: flex; align-items: center; } .topnav.responsive {position: relative;} .topnav.responsive { display: flex; align-items: center; } /* .topnav.responsive .icon { position: absolute; right: 0; top: 0; } */ .topnav .items .item { display: flex; flex-direction: column; } .topnav.responsive .container .items .item { display: flex; flex-direction: column; } /* AFTER YOU CLICK ON HAMBURGER */ .topnav.responsive .container .items .item a { float: none; display: block; text-align: left; } .topnav.responsive a.icon { display: flex !important; align-items: center; } .topnav.responsive .dropdown {float: none;} .topnav.responsive .dropdown-content {position: relative;} .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; /* text-align: left; */ } /* ================ WHITE MENU NAVBAR DROPDOWN - END ============ */ #masthead .header-container .header-container_wrap .items .quality-logo { margin: auto; margin-bottom: 1rem; } #masthead .header-container .header-container_wrap .items .quality-logo p { font-size: 10px; } #masthead .header-container .header-container_wrap .items .contact-info { display: flex; flex-direction: column; } #masthead .header-container .header-container_wrap { padding: 2rem; } #masthead .header-container .header-container_wrap .items .item { margin-bottom: .5rem; margin-right: 0; } #masthead .header-container .header-container_wrap .items .item .contact-block__value-wrap { margin-bottom: 0rem; } #masthead .header-container .header-container_wrap .items .item .contact-block__value-wrap p { line-height: .75rem; } /* White Menu Bar */ #masthead .header-container .fixed-nav { margin-top: -40px; } /* Facebook */ #masthead .header-container .header-container_wrap .items .item .facebook-like { text-align: center; /* align-self: center; */ margin: auto; } .l-heading { font-weight: bold; font-size: 2rem; margin-bottom: 0.75rem; line-height: 1.1; } .m-heading { font-weight: bold; font-size: 1rem; margin-bottom: 0.75rem; line-height: 1.1; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { font-size: 2rem; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" integrity="sha384-REHJTs1r2ErKBuJB0fCK99gCYsVjwxHrSU0N7I1zl9vZbggVJXRMsv/sLlOAGb4M" crossorigin="anonymous"> <!-- CSS STYLES --> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 1024px)" href="css/mobile.css"> <!-- Swiper Header Slider --> <!-- <link rel="stylesheet" href="/css/swiper.min.css"> --> <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> --> <title>Document</title> </head> <body id="home"> <!-- Header Container --> <!-- Navbar-Black --> <div id="masthead" class="site-header"> <nav class="header-container"> <!-- Top Black Header Bar --> <div class="header-container_wrap"> <div class="container"> <div class="items"> <div class="quality-logo"> <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="quality-logo"> <p>Offering Quality work at a fair price to the Central Texas area.</p> </div> <div class="contact-info"> <div class="item"> <i class="fas fa-phone"></i> <div class="contact-block__value-wrap"> <p> Call Today</p> <p><strong>(972)-555-5555</strong></p> </div> </div> <div class="item"> <i class="fas fa-clock"></i> <div class="contact-block__value-wrap"> <p>Mon-Fri:<strong> 7am to 7pm</strong></p> <p>Sat & Sun: 9am-4pm</p> </div> </div> <div class="item"> <i class="fas fa-map-marker-alt"></i> <p>Serving Central Texas</p> </div> <div class="item"> <div class="facebook-like"> <i class="fab fa-facebook-f"></i> <p>LIKE US</p> </div> </div> </div> </div> </div> </div> <!-- ======================== Bottom White header START ======================--> <div class="topnav" id="myTopnav"> <div class="container"> <div class="items"> <div class="item"> <nav class="mynav"> <!-- <a href="#home" class="active">Menu Click Here</a> --> <!-- Hamburger --> <ul> <div class="hamburger"> <!-- <p class="active">Menu Click Here</p> --> <a href="javascript:void(0);" class="icon" onclick="myFunction()"><p>Menu Click Here </p> &#9776;</a> </div> <li><a href="#home">About</a> <!-- DROPDOWN MENU --> <li> <div class="dropdown"> <button class="dropbtn"> <a href="">Services <i class="fa fa-caret-down"></i></a> </button> <div class="dropdown-content"> <a href="#">Brush Mulching & Land Clearing</a> <a href="#">Mapping & Measurement</a> <a href="#">Erosion Mitigation / Driveways / Roads</a> <a href="#">Landscaping & Drainage Management</a> <a href="#">Foundation & Pads</a> <a href="#">General Dirt Work & Tank Pond Trenching</a> <a href="#">Demolition & Clean Up</a> <a href="#">Septic Installation</a> </div> </div> </li> <!-- DROPDOWN MENU END --> <li><a href="#home">Photo Gallery</a></li> <li><a href="#home">Video Example</a></li> <li><a href="#home">Contacts</a></li> <!-- <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> --> </ul> </nav> </div> <div class="item"> <i class="fas fa-search"></i> </div> </div> </div> </div> <span class="target"></span> <!-- ======================== Bottom White header END ======================--> </nav> </div> <!-- HEADER CONTAINER END -->

Answer 1

你可以试试这个。 希望它会起作用。

//User agent for Mobile only...
if(navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi/i) ) {
    console.log('Mobile Stuff...');
}

//User agent for Tablet only...
if (navigator.userAgent.match(/Tablet|iPad/i)) {
    console.log('Tablet Stuff...');
}

//User-agent for Desktop only...
if(!navigator.userAgent.match(/Mobile|Windows Phone|Lumia|Android|webOS|iPhone|iPod|Blackberry|PlayBook|BB10|Opera Mini|\bCrMo\/|Opera Mobi|Tablet|iPad/i) ) {
    console.log('Desktop Stuff...');
}

Answer 2

JS

我看到的最简单的解决方案是检查 JS 值window.innerWidth是否大于或等于 992px（最小桌面宽度）。

CSS

但是，由于您确实想应用与 CSS 相关的样式，因此您很可能希望编写一个媒体查询来完成您的工作。

例子：

@media screen and (min-width: 992px) {
    /* CSS-styling for desktop */
}

这些最好放在 CSS 样式表的底部。 如果您不熟悉它们，我强烈建议您查看它们。

Answer 3

对不起，我找到了答案，很容易修复。 我没有添加另一个 javascript 函数，而是在 CSS Media Query for mobile 中使用了下面的代码。

@media screen and (max-width: 600px) {
    /* Removing the Menu Underline For Ipad and Mobile */

    .target {
       display: none;
    }

}