How to Make the Bootstrap Navbar Dropdown Work on Hover<\/a><\/li>\n<\/ul>\n\u6b64 mouse hover \u7684\u4e92\u52d5\u908f\u8f2f\u662f\u6bd4\u8f03\u5408\u4e4e\u9700\u6c42\u7684\uff0c\u5927\u65bc\u8a2d\u5b9a\u5bec\u5ea6\u6642\u81ea\u52d5\u5c55\u958b\uff0c\u5c0f\u65bc\u6642\u9700\u8981\u9ede\u64ca\u5c55\u958b<\/p>\n
<nav class=\"navbar navbar-expand-md navbar-dark bg-dark\">\r\n <div class=\"container-fluid\">\r\n <a class=\"navbar-brand\" href=\"#\">\r\n <img class=\"logo horizontal-logo\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/162656\/horizontal-logo.svg\" alt=\"forecastr logo\">\r\n\t <\/a>\r\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <span class=\"navbar-toggler-icon\"><\/span>\r\n <\/button>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\r\n <ul class=\"navbar-nav ml-auto\">\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n <\/li>\r\n <li class=\"nav-item dropdown\">\r\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown2\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n Dropdown\r\n <\/a>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown2\">\r\n <a class=\"dropdown-item\" href=\"#\">Action<\/a>\r\n <a class=\"dropdown-item\" href=\"#\">Another action<\/a>\r\n <div class=\"dropdown-divider\"><\/div>\r\n <a class=\"dropdown-item\" href=\"#\">Something else here<\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"nav-item dropdown\">\r\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown3\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n Dropdown\r\n <\/a>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown3\">\r\n <a class=\"dropdown-item\" href=\"#\">Action<\/a>\r\n <a class=\"dropdown-item\" href=\"#\">Another action<\/a>\r\n <div class=\"dropdown-divider\"><\/div>\r\n <a class=\"dropdown-item\" href=\"#\">Something else here<\/a>\r\n <\/div>\r\n <\/li>\r\n <li class=\"nav-item\">\r\n <a class=\"nav-link\" href=\"#\">Link<\/a>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n<\/nav><\/pre>\n\u5c07 JavaScript \u653e\u5728 HTML \u4e4b\u5f8c<\/p>\n
const $dropdown = $(\".dropdown\");\r\nconst $dropdownToggle = $(\".dropdown-toggle\");\r\nconst $dropdownMenu = $(\".dropdown-menu\");\r\nconst showClass = \"show\";\r\n\r\n$(window).on(\"load resize\", function() {\r\n if (this.matchMedia(\"(min-width: 768px)\").matches) {\r\n $dropdown.hover(\r\n function() {\r\n const $this = $(this);\r\n $this.addClass(showClass);\r\n $this.find($dropdownToggle).attr(\"aria-expanded\", \"true\");\r\n $this.find($dropdownMenu).addClass(showClass);\r\n },\r\n function() {\r\n const $this = $(this);\r\n $this.removeClass(showClass);\r\n $this.find($dropdownToggle).attr(\"aria-expanded\", \"false\");\r\n $this.find($dropdownMenu).removeClass(showClass);\r\n }\r\n );\r\n } else {\r\n $dropdown.off(\"mouseenter mouseleave\");\r\n }\r\n});<\/pre>\n--<\/p>\n
<\/div>\n