在特定屏幕寬度下隱藏JS函數

Question

我將jQuery插件用於網站上的固定社交媒體欄。 在移動設備上，該欄與網站上的內容重疊，因此我嘗試在移動視圖中完全隱藏該欄。

Answer 1

使用CSS和媒體查詢更容易做到這一點，例如

 @media screen and (max-width: 700px) { .contactButton { display: none; } } 

 <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> 

---

如果您需要使用腳本，這是一種方法

 window.onresize = function() { if (window.innerWidth < 700) { $(".contactButton").hide(); } else { $(".contactButton").show(); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> <button class="contactButton">Button</button> 

---

在評論/問題編輯后更新

這是您新發布的代碼示例的更新，其中向CSS添加了1條規則和1個屬性（請參見CSS中的注釋）

堆棧片段

 (function($) { 'use strict'; // Main function $.contactButtons = function(options) { // Define the defaults var defaults = { effect: '', // slide-on-scroll buttons: { 'facebook': { class: 'facebook', use: false, icon: 'facebook', link: '', title: 'Follow on Facebook' }, 'google': { class: 'gplus', use: false, icon: 'google-plus', link: '', title: 'Visit on Google Plus' }, 'linkedin': { class: 'linkedin', use: false, icon: 'linkedin', link: '', title: 'Visit on LinkedIn' }, 'twitter': { class: 'twitter', use: false, icon: 'twitter', link: '', title: 'Follow on Twitter' }, 'pinterest': { class: 'pinterest', use: false, icon: 'pinterest', link: '', title: 'Follow on Pinterest' }, 'phone': { class: 'phone', use: false, icon: 'phone', link: '', title: 'Call us', type: 'phone' }, 'email': { class: 'email', use: false, icon: 'envelope', link: '', title: 'Send us an email', type: 'email' } } }; // Merge defaults and options var s, settings = options; for (s in defaults.buttons) { if (options.buttons[s]) { settings.buttons[s] = $.extend(defaults.buttons[s], options.buttons[s]); } } // Define the container for the buttons var oContainer = $("#contact-buttons-bar"); // Check if the container is already on the page if (oContainer.length === 0) { // Insert the container element $('body').append('<div id="contact-buttons-bar">'); // Get the just inserted element oContainer = $("#contact-buttons-bar"); // Add class for effect oContainer.addClass(settings.effect); // Add show/hide button var sShowHideBtn = '<button class="contact-button-link show-hide-contact-bar"><span class="fa fa-angle-left"></span></button>'; oContainer.append(sShowHideBtn); var i; for (i in settings.buttons) { var bs = settings.buttons[i], sLink = bs.link, active = bs.use; // Check if element is active if (active) { // Change the link for phone and email when needed if (bs.type === 'phone') { sLink = 'tel:' + bs.link; } else if (bs.type === 'email') { sLink = 'mailto:' + bs.link; } // Insert the links var sIcon = '<span class="fa fa-' + bs.icon + '"></span>', sButton = '<a href="' + sLink + '" class="contact-button-link cb-ancor ' + bs.class + '" ' + (bs.title ? 'title="' + bs.title + '"' : '') + (bs.extras ? bs.extras : '') + '>' + sIcon + '</a>'; oContainer.append(sButton); } } // Make the buttons visible setTimeout(function() { oContainer.animate({ left: 0 }); }, 200); // Show/hide buttons $('body').on('click', '.show-hide-contact-bar', function(e) { e.preventDefault(); e.stopImmediatePropagation(); $('.show-hide-contact-bar').find('.fa').toggleClass('fa-angle-right fa-angle-left'); oContainer.find('.cb-ancor').toggleClass('cb-hidden'); }); } }; // Slide on scroll effect $(function() { // Define element to slide var el = $("#contact-buttons-bar.slide-on-scroll"); // Load top default el.attr('data-top', el.css('top')); // Listen to scroll $(window).scroll(function() { clearTimeout($.data(this, "scrollCheck")); $.data(this, "scrollCheck", setTimeout(function() { var nTop = $(window).scrollTop() + parseInt(el.attr('data-top')); el.animate({ top: nTop }, 500); }, 250)); }); }); }(jQuery)); (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); // Initialize Share-Buttons $.contactButtons({ effect: 'slide-on-scroll', buttons: { 'facebook': { class: 'facebook', use: true, link: 'javascript:void(0)', extras: 'target="_blank"' }, 'linkedin': { class: 'linkedin', use: true, link: 'javascript:void(0)' }, 'twitter': { class: 'twitter', use: true, link: 'javascript:void(0)' }, // 'phone': { class: 'phone separated', use: true, link: '+000' }, // 'email': { class: 'email', use: true, link: 'test@web.com' } } }); 

 #contact-buttons-bar { /* added, to intially hide it */ display: none; } @media screen and (min-width: 768px) { #contact-buttons-bar { display: block; /* added, to unhide it */ position: fixed; top: 120px; left: -50px; width: 50px; } #contact-buttons-bar.slide-on-scroll { position: absolute; } .contact-button-link { display: block; width: 50px; height: 50px; padding: 0; margin-bottom: 1px; text-align: center; line-height: 50px; font-size: 22px; background: #8e8e93; color: #fff; position: relative; left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 250ms; -moz-transition: all 250ms; transition: all 250ms; } .contact-button-link:hover, .contact-button-link:focus, .contact-button-link:active { color: #fff; padding-left: 20px; width: 70px; } .contact-button-link.cb-hidden { left: -50px; } .contact-button-link.facebook { background: #3b5998; } .contact-button-link.linkedin { background: #0077b5; } .contact-button-link.gplus { background: #db4437; } .contact-button-link.separated { margin-top: 1em; } .show-hide-contact-bar, .contact-button-link.show-hide-contact-bar:focus, .contact-button-link.show-hide-contact-bar:active { background: transparent; color: #000; border: 0; outline: 0; padding: 0; width: 50px; } .contact-button-link.show-hide-contact-bar:hover { color: #000; background: #ccc; padding: 0; width: 50px; } } body { font-family: 'Lato', sans-serif; font-size: 16px; max-width: 550px; margin: 4em auto; line-height: 1.7; } h1 { text-transform: uppercase; font-weight: 300; margin: 0 0 1em; text-align: center; } h1 span { font-weight: 700; display: block; } p+p { margin-top: 1.5em; } .git { background: #000; } 

 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery Contact Buttons Plugin Demo</title> <meta name="description" content="Share-Buttons is a plugin based on jQuery to add share and contact buttons to your website."> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <h1>jQuery Contact Buttons Plugin Demo</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ligula nisi, rutrum imperdiet tincidunt egestas, convallis vitae tellus. Fusce eleifend enim erat, ac consectetur felis consequat a. Etiam gravida lacinia est feugiat dictum. Phasellus feugiat vulputate magna. Aenean faucibus, erat vel tempor lobortis, ligula metus maximus ligula, sed bibendum augue turpis id erat. Nulla facilisi. Praesent eget libero pretium, dictum lacus ac, lacinia orci. Morbi condimentum scelerisque dui, eu pellentesque nunc lobortis id. Suspendisse vitae odio volutpat enim vestibulum efficitur vitae vel neque. Cras commodo mi quis nulla pharetra efficitur. Cras at massa sed enim fringilla dictum. Curabitur et tellus eget mi mollis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis sed arcu rutrum arcu maximus rhoncus. Integer massa urna, consequat nec rhoncus eu, imperdiet in tortor. Nunc lectus arcu, scelerisque id turpis et, auctor convallis ipsum.</p> <p>Pellentesque bibendum lectus quis nibh bibendum, nec pretium quam porttitor. Sed dignissim placerat tempus. Morbi cursus vel ex sit amet cursus. Nunc eget arcu facilisis, tristique turpis vitae, posuere quam. Nulla dictum lobortis diam ac lacinia. Donec a justo condimentum, vehicula ligula quis, condimentum sapien. Mauris tempor euismod velit vitae porta. Nunc feugiat, quam sit amet gravida congue, nulla augue ultrices lacus, quis sodales turpis nisl nec mi. Suspendisse non quam et lorem mattis commodo egestas non orci. Praesent non imperdiet mauris. In vestibulum ligula eget mi egestas tincidunt. Vestibulum auctor est nec ante egestas facilisis. Sed imperdiet, nulla at imperdiet egestas, orci neque volutpat arcu, ac mattis est sem vel nulla. Aenean auctor nibh nec leo tristique volutpat. Sed sem mauris, gravida quis ultricies eget, congue sit amet elit.</p> <p>Donec lobortis eu velit nec sagittis. Suspendisse quis erat ac dui rhoncus feugiat. Maecenas lobortis, sapien vel porttitor laoreet, libero massa efficitur massa, vel dapibus tortor nisl id lectus. Morbi turpis enim, dictum quis viverra vitae, ultricies ut augue. Sed eu nibh ac lacus imperdiet malesuada vel non odio. Praesent et lectus elit. Donec risus ligula, sagittis quis consectetur aliquam, luctus feugiat ex. Donec scelerisque enim in purus faucibus congue. Maecenas sit amet aliquet enim, at condimentum arcu. In sit amet tristique quam. Mauris ac elit at nunc luctus tempor non in odio. Mauris ornare, neque ut accumsan mollis, turpis ante eleifend lacus, at varius libero orci nec magna.</p> <p>Suspendisse bibendum nibh ex, imperdiet ullamcorper leo volutpat at. Vivamus congue suscipit elit, eu pulvinar mi tristique ut. Morbi vitae massa vitae erat ornare consectetur. Vestibulum sed lacus et diam mollis lobortis. Curabitur ultrices felis ipsum, ut laoreet dolor posuere eu. Etiam sed est id urna scelerisque malesuada. Aenean turpis ipsum, pellentesque tristique ipsum sit amet, hendrerit luctus diam. Nunc eget consectetur ipsum. Proin bibendum porttitor quam.</p> <p>Etiam condimentum ullamcorper elementum. Fusce fermentum at sem non feugiat. Aenean vitae purus luctus, laoreet lorem quis, consequat elit. Donec nulla libero, gravida et hendrerit a, porta non risus. Sed commodo id velit ut molestie. Pellentesque vulputate sit amet nulla at fringilla. Morbi blandit maximus est, vitae tempor quam sollicitudin aliquam. Ut rhoncus nunc at quam mollis, non accumsan augue pellentesque. Etiam scelerisque metus in metus ornare, non iaculis nunc vestibulum. In condimentum dui non mollis faucibus. Etiam a tortor aliquet, mattis ante vel, ullamcorper lectus. Aliquam tortor purus, dapibus id pharetra eu, posuere vehicula tortor. Cras interdum consectetur fringilla. Nam et efficitur neque, vel iaculis eros. Proin interdum, augue vitae maximus sollicitudin, massa ligula lobortis augue, congue hendrerit turpis tortor non ligula. Maecenas non enim neque.</p> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </body> </html>