$(document).ready(function () { $('.header').on('mouseenter mouseleave', '.navbar', function (e) { const $brandImg = $(this).find('.custom-navbar-brand-img'); const $facebookSvg = $(this).find('.facebook-svg'); if (window.matchMedia("(min-width: 1200px)").matches) { if (e.type === 'mouseenter') { $brandImg.attr('src', '/static/image/index/logo-2.png'); // 替换为悬停时的图片路径 $facebookSvg.attr('src', '/static/svg/facebook-2.svg'); // 替换为悬停时的图片路径 } else if (e.type === 'mouseleave') { $brandImg.attr('src', '/static/image/index/logo.png'); // 回复为默认图片路径 $facebookSvg.attr('src', '/static/svg/facebook-1.svg'); // 替换为悬停时的图片路径 } } }); $('.dropdown-submenu .dropdown-item').on('click', function (e) { e.stopPropagation(); const $submenu = $(this).next('.dropdown-3rd-level-container'); // 获取对应的三级菜单容器 // 切换显示/隐藏状态,并更新aria-expanded属性 const isExpanded = this.getAttribute('aria-expanded') === 'true'; console.log(isExpanded) this.setAttribute('aria-expanded', !isExpanded); if (isExpanded) { $submenu.hide(); } else { $submenu.show(); } const otherSubmenus = $('.dropdown-submenu > a[aria-expanded="true"]').not(this); otherSubmenus.each(function () { const $otherSubmenu = $(this).next('.dropdown-3rd-level-container'); this.setAttribute('aria-expanded', 'false'); $otherSubmenu.hide(); }); }); $('.dropdown').on('hidden.bs.dropdown', function() { $('.dropdown-3rd-level-container').hide(); const otherSubmenus = $('.dropdown-submenu > a[aria-expanded="true"]'); otherSubmenus.each(function () { const $otherSubmenu = $(this).next('.dropdown-3rd-level-container'); this.setAttribute('aria-expanded', 'false'); }); }); }); $(function () { dropdownOpen(); }); function dropdownOpen() { if (window.matchMedia("(min-width: 1200px)").matches) { $('.dropdown').mouseover(function () { $(this).addClass('show'); //查找当前元素子节点中的对象,修改其class,这样 //这样当有多个下拉菜单时,可以分别独立处理,而不会出现都下拉的bug $(this).find(".dropdown-menu").addClass('show'); }).mouseout(function () { $(this).find(".dropdown-menu").removeClass('show'); $(this).removeClass('show'); }); $('.dropdown-submenu').on({ mouseenter: function () { const $submenu = $(this).children('.dropdown-menu'); const $container = $(this).find('.dropdown-3rd-level-container'); $submenu.addClass('show'); $container.show(); }, mouseleave: function () { const $submenu = $(this).children('.dropdown-menu'); const $container = $(this).find('.dropdown-3rd-level-container'); $submenu.removeClass('show'); $container.hide(); } }); } }