html - 导航栏子菜单默认打开
问题描述
我正在尝试使用 Bulma 在我的网站上实现导航栏 megamenu，因为这是我发现的唯一一个可以在不干扰网站上已有代码的情况下工作的框架。我以前从没用过 Bulma，只有一些 CSS、HTML 和 PHP 的基础知识。
导航栏在桌面版本上运行良好，但我被困在移动版本上。下拉菜单默认展开，我不知道如何禁用此行为。这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://res.cloudinary.com/rosaritoliving/raw/upload/v1564503077/Baja123%20Menu/megamenu_1564427792.css">
<script>
.navbar-item.is-mega {
position: static;
.is-mega-menu-title {
margin-bottom: 0;
padding: .375rem 1rem;
}
}
</script>
</head>
<body>
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="https://www.baja123.com">
<img src="https://mlvtslglmiuu.i.optimole.com/otn1P_eJnbI/w:461/h:92/q:auto/https://www.rosaritoliving.com/wp-content/uploads/logo-baja123-real-estate.png" alt="Baja123 Baja's Best Real Estate Website" width="150" height="50">
</a>
<div class="navbar-burger burger" data-target="navMenubd-example">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenubd-example" class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com">HOME</a></div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">OCEANFRONT LISTINGS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">BAJA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/BAJA_LIVING/page_2312494.html">About Baja California</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ROSARITO REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_REAL_ESTATE/page_1754239.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_ROSARITO_MAIN_PAGE_BUYERS_GUIDE/page_2615332.html">About Rosarito Beach</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TIJUANA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_REAL_ESTATE_LISTINGS/page_1754238.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/TIJUANA_BUYERS_GUIDE/page_2649211.html">About Tijuana</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">ENSENADA REAL ESTATE</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_REAL_ESTATE_LISTINGS/page_1754240.html">Listings for Sale</a>
<a class="navbar-item" href="https://www.baja123.com/ROSARITO_BEACH_AREA_RENTALS/page_1666562.html">Listings for Rent</a>
<a class="navbar-item" href="https://www.baja123.com/ENSENADA_BUYERS_GUIDE/page_2650491.html">About Ensenada</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">BAJA LIVING</div>
<div id="blogDropdown" class="navbar-dropdown is-boxed">
<div class="container">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">UTILITIES AND SERVICES</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Water_Company/page_2312474.html">Water Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Electric_Company/page_2522445.html">Electric Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Gas_Company/page_2522339.html">Gas Company</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Telephone_Service/page_2313221.html">Telephone Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Internet_Service/page_2313224.html">Internet Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Cellular_Service/page_2313222.html">Cellular Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Television_Service/page_2313223.html">TV Service</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_How_to_Dial_Phones/page_2313225.html">How to Dial Phones in Mexico</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Emergency_Numbers/page_2522342.html">Emergency Phone Numbers</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">MOVING YOUR FURNITURE TO THE ROSARITO AREA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_YOUR_PERSONAL_PROPERTY_INTO_MEXICO/page_2313227.html">Moving Instructions</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Options</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">AUTO INFORMATION</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/DRIVING_A_US_VEHICLE_IN_MEXICO/page_2313790.html">Driving your Car in Baja</a>
<a class="navbar-item" href="https://www.baja123.com/DRIVING_TIPS_AND_RULES_FOR_MEXICO/page_2313786.html">Driving Tips and Information</a>
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurancce Services</a>
<a class="navbar-item" href="https://www.baja123.com/MECHANICS_IN_THE_ROSARITO_BEACH_AREA/page_2313784.html">Auto Repair Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">HEALTH CARE, HOSPITALS AND DOCTORS IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/HEALTHCARE_DOCTORS_DENTISTS_AND_HOSPITALS/page_2054379.html">Healthcare, Doctors, Dentists and Hospitals</a>
</div>
</div>
<hr class="navbar-divider">
<div class="columns">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">INSURANCE SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/AUTOMOBILE_INSURANCE_IN_MEXICO/page_2313289.html">Auto Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/MEDICAL_INSURANCE_IN_MEXICO/page_2313292.html">Medical Insurance Services</a>
<a class="navbar-item" href="https://www.baja123.com/HOMEOWNER_INSURANCE_IN_MEXICO/page_2313290.html">Homeowners Insurance Services</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PETS AND VETS</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/MOVING_PETS_INTO_MEXICO/page_2058791.html">Bring your Pet to the Rosarito Area</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">PROFESSIONAL SERVICES IN BAJA</h1>
<div class="navbar-content">
<a class="navbar-item" href="https://www.baja123.com/IMMIGRATION_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_1681440.html">Immigration Services</a>
<a class="navbar-item" href="https://www.baja123.com/MAIL_SERVICE_IN_ROSARITO_BEACH/page_2522113.html">Mail Services</a>
<a class="navbar-item" href="https://www.baja123.com/UTILITIES_AND_SERVICES_IN_BAJA_Bill_Paying_Service/page_2522340.html">Bill Paying Services</a>
<a class="navbar-item" href="https://www.baja123.com/LEGAL_SERVICES_IN_MEXICO/page_2313260.html">Legal Services</a>
<a class="navbar-item" href="https://www.baja123.com/ACCOUNTING_IN_MEXICO/page_2313261.html">Accounting Services</a>
<a class="navbar-item" href="https://www.baja123.com/STORAGE_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645216.html">Storage Services</a>
<a class="navbar-item" href="https://www.baja123.com/MOVING_SERVICES_IN_THE_ROSARITO_BEACH_AREA/page_2645197.html">Moving Services</a>
<a class="navbar-item" href="https://www.baja123.com/CLOSING_SERVICES_FOR_BAJA_REAL_ESTATE/page_2645211.html">Closing Services</a>
<a class="navbar-item" href="https://www.baja123.com/PROPERTY_MANAGEMENT_IN_MEXICO/page_2313213.html">Property Management</a>
</div>
</div>
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">TRANSPORTATION SERVICES</h1>
<a class="navbar-item" href="https://www.baja123.com/GETTING_AROUND_IN_THE_ROSARITO_BEACH_AREA/page_2313801.html">Transportation in Rosarito Beach</a>
</div>
</div>
<hr class="navbar-divider">
<div class="column">
<h1 class="title is-6 is-mega-menu-title has-text-danger has-text-weight-bold">SHOPPING IN THE ROSARITO AREA</h1>
<a class="navbar-item" href="https://www.baja123.com/BUYING_FOOD_IN_MEXICO/page_2313807.html">Supermarkets & Convenience Stores</a>
<a class="navbar-item" href="https://www.baja123.com/BUYING_HOUSEHOLD_FURNISHINGS_IN_MEXICO/page_2313809.html">Furniture & Appliances</a>
</div>
</div>
</div>
</div>
<div class="column">
<div class="navbar-content">
<div class="navbar-item has-dropdown is-hoverable is-boxed">
<div class="navbar-link">
SELLERS & BUYERS
</div>
<div id="moreDropdown" class="navbar-dropdown is-boxed">
<a class="navbar-item" href="https://www.baja123.com/BAJA_REAL_ESTATE/page_2493056.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Baja Real Estate</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-search "></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/LIST_YOUR_ROSARITO_BEACH_PROPERTY/page_2198558.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>List Your Property</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-usd"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/Newsletter/page_2517204.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Hot Property Alert</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-bullhorn"></i>
</span>
</div>
</div>
</div>
<a class="navbar-item" href="https://www.baja123.com/MEXICO_BUYERS_GUIDE/page_2609247.html">
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<p>
<strong>Buyer's Guide</strong>
<br>
<small>Click Here!</small>
</p>
</div>
</div>
<div class="level-right">
<div class="level-item">
<span class="icon">
<i class="fa fa-compass"></i>
</span>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="navbar-item">
<a class="navbar-item" href="http://blog.baja123.com/" target="_blank">BLOG</a></div>
<div class="navbar-item">
<a class="navbar-item" href="https://www.baja123.com/CONTACT_US/page_1232095.html">CONTACT US</a></div>
</nav>
</body>
</html>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any nav burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});</script>
我需要在移动版本上默认折叠下拉菜单，现在它们默认展开。对你的帮助表示感谢。
解决方案
推荐阅读
- twitter-bootstrap - 如何在卡片组中添加链接？
- coldfusion - 如何将值传递给引导模式窗口并显示动态内容
- java - 如何在 Mockito 上测试 Servlet？
- javascript - Javascript Promises，返回的 Promise 和 catch 方法
- javascript - 谁能告诉我是否可以在 wemos d1 mini 上闪烁 javascript 代码？
- qt - 如何在 Qt3D 中绘制对象的轮廓？
- python - Pytest：将一个夹具传递给另一个
- javascript - 无法使用Angular [Ionic]检查Firebase中是否存在配置文件
- django - 如何根据 Django 中外键的选择填充选择字段？
- php - 如何制作除了用逗号分隔的数字之外不允许任何内容的正则表达式？