求助:用Tampermonkey脚本隐藏Zillow.com自动展开的顶部菜单栏
求助:用Tampermonkey脚本隐藏Zillow.com自动展开的顶部菜单栏
我太懂这种鼠标不小心滑过就弹出菜单的烦躁感了!你写的脚本没生效主要是几个小问题搞的鬼,我帮你修正并给出更靠谱的方案:
原脚本的问题分析
- 选择器写法错误:你用的
.data-zg-section="main"是错误的属性选择器格式,正确的应该是[data-zg-section="main"];而且removeClass的参数是类名,不能带.前缀,你这里其实想操作的是属性,不是类,所以这个思路本身就不对。 - 元素加载时机问题:页面可能还没加载完菜单元素,你的函数就执行了,自然找不到目标元素。
修正后的可行脚本(优先用CSS方案,更高效)
直接用GM_addStyle注入CSS,从根源上阻止菜单hover展开,这种方法比JS更稳定:
// ==UserScript== // @name Hide Zillow Auto-Expanding Top Menu // @namespace http://tampermonkey.net/ // @version 0.1 // @description Stop Zillow's top menu from auto-expanding on hover // @author mikmak (modified) // @match https://www.zillow.com/* // @grant GM_addStyle // ==/UserScript== // 强制让hover时的下拉菜单不显示 GM_addStyle(` [data-testid="main-navigation-container"]:hover .StyledDropdownMenuWrapper-s10d97pz-0 { display: none !important; } `); // 如果想彻底把整个顶部菜单触发区域隐藏,把下面这段注释去掉 /* GM_addStyle(` [data-testid="main-navigation-container"] { visibility: hidden !important; width: 0 !important; overflow: hidden !important; } `); */
备选JS方案(适合需要更复杂逻辑的场景)
如果想用JS来处理,需要确保元素加载完成后再执行代码:
// ==UserScript== // @name Hide Zillow Auto-Expanding Top Menu // @namespace http://tampermonkey.net/ // @version 0.1 // @description Stop Zillow's top menu from auto-expanding on hover // @author mikmak (modified) // @match https://www.zillow.com/* // @grant none // ==/UserScript== // 等待页面加载完成后执行 window.addEventListener('load', () => { // 找到顶部菜单容器 const menuContainer = document.querySelector('[data-testid="main-navigation-container"]'); if (menuContainer) { // 移除hover事件监听,阻止触发展开 menuContainer.removeEventListener('mouseover', menuContainer.onmouseover); // 强制隐藏已展开的下拉菜单 const dropdownMenu = menuContainer.querySelector('.StyledDropdownMenuWrapper-s10d97pz-0'); if (dropdownMenu) { dropdownMenu.style.display = 'none'; } } });
小提示
如果以后Zillow改了页面元素的类名或属性,你可以按F12打开浏览器开发者工具,自己定位菜单元素,替换脚本里的选择器就行。
内容来源于stack exchange
相关产品推荐
相关产品推荐

