使用引导程序时，下拉菜单在移动屏幕上不起作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用引导程序时，下拉菜单在移动屏幕上不起作用相关的知识，希望对你有一定的参考价值。
[请理解我是一个初学者，我对英语不熟悉。我使用了模板，但下拉菜单在计算机屏幕上有效，但在移动屏幕上无效。标记对正确，我将向您简要介绍代码。
这是我使用的模板的链接。https://colorlib.com/wp/template/locals-directory/
- 标题部分
<head>
<link rel="stylesheet" href="/my/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="/my/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="/my/css/flaticon.css" type="text/css">
<link rel="stylesheet" href="/my/css/nice-select.css" type="text/css">
<link rel="stylesheet" href="/my/css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="/my/css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="/my/css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="/my/css/style.css" type="text/css">
<header class="header-section">
<div class="container-fluid">
<div class="logo">
<a href="/lmain"><img src="/my/img/main_logo.png" alt="">
</div>
<nav class="main-menu mobile-menu navbar">
<ul>
<li class="nav-item active">
<a href="/lmain" class="nav-link">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Hair Style
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"
style="background-color:#2E2E2E">
<a class="dropdown-item" href="/man" style="background-color:#2E2E2E">Man</a>
<a class="dropdown-item" href="/woman"style="background-color:#2E2E2E">Woman</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Trend</a>
</li>
</ul>
</nav>
<div id="mobile-menu-wrap"></div>
</div>
</header>- 页脚部分
<!-- Js Plugins -->
<script src="/my/js/jquery-3.3.1.min.js"></script>
<script src="/my/js/bootstrap.min.js"></script>
<script src="/my/js/jquery.magnific-popup.min.js"></script>
<script src="/my/js/jquery.slicknav.js"></script>
<script src="/my/js/owl.carousel.min.js"></script>
<script src="/my/js/jquery.nice-select.min.js"></script>
<script src="/my/js/mixitup.min.js"></script>
<script src="/my/js/main.js"></script>- jquery.slicknav.js
;(function ($, document, window) {
var
// default settings object.
defaults = {
label: 'MENU',
duplicate: true,
duration: 200,
easingOpen: 'swing',
easingClose: 'swing',
closedSymbol: '►',
openedSymbol: '▼',
prependTo: 'body',
appendTo: '',
parentTag: 'a',
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
removeIds: true,
removeClasses: false,
removeStyles: false,
brand: '',
animations: 'jquery',
init: function () {},
beforeOpen: function () {},
beforeClose: function () {},
afterOpen: function () {},
afterClose: function () {}
},
mobileMenu = 'slicknav',
prefix = 'slicknav',
Keyboard = {
DOWN: 40,
ENTER: 13,
ESCAPE: 27,
LEFT: 37,
RIGHT: 39,
SPACE: 32,
TAB: 9,
UP: 38,
};
function Plugin(element, options) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
// Don't remove IDs by default if duplicate is false
if (!this.settings.duplicate && !options.hasOwnProperty("removeIds")) {
this.settings.removeIds = false;
}
this._defaults = defaults;
this._name = mobileMenu;
this.init();
}
Plugin.prototype.init = function () {
var $this = this,
menu = $(this.element),
settings = this.settings,
iconClass,
menuBar;
// clone menu if needed
if (settings.duplicate) {
$this.mobileNav = menu.clone();
} else {
$this.mobileNav = menu;
}
// remove IDs if set
if (settings.removeIds) {
$this.mobileNav.removeAttr('id');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('id');
});
}
// remove classes if set
if (settings.removeClasses) {
$this.mobileNav.removeAttr('class');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('class');
});
}
// remove styles if set
if (settings.removeStyles) {
$this.mobileNav.removeAttr('style');
$this.mobileNav.find('*').each(function (i, e) {
$(e).removeAttr('style');
});
}
// styling class for the button
iconClass = prefix + '_icon';
if (settings.label === '') {
iconClass += ' ' + prefix + '_no-text';
}
if (settings.parentTag == 'a') {
settings.parentTag = 'a href="#"';
}
// create menu bar
$this.mobileNav.attr('class', prefix + '_nav');
menuBar = $('<div class="' + prefix + '_menu"></div>');
if (settings.brand !== '') {
var brand = $('<div class="' + prefix + '_brand">'+settings.brand+'</div>');
$(menuBar).append(brand);
}
$this.btn = $(
['<' + settings.parentTag + ' aria-haspopup="true" role="button" tabindex="0" class="' + prefix + '_btn ' + prefix + '_collapsed">',
'<span class="' + prefix + '_menutxt">' + settings.label + '</span>',
'<span class="' + iconClass + '">',
'<span class="' + prefix + '_icon-bar"></span>',
'<span class="' + prefix + '_icon-bar"></span>',
'<span class="' + prefix + '_icon-bar"></span>',
'</span>',
'</' + settings.parentTag + '>'
].join('')
);
$(menuBar).append($this.btn);
if(settings.appendTo !== '') {
$(settings.appendTo).append(menuBar);
} else {
$(settings.prependTo).prepend(menuBar);
}
menuBar.append($this.mobileNav);
// iterate over structure adding additional structure
var items = $this.mobileNav.find('li');
$(items).each(function () {
var item = $(this),
data = {};
data.children = item.children('ul').attr('role', 'menu');
item.data('menu', data);
// if a list item has a nested menu
if (data.children.length > 0) {
// select all text before the child menu
// check for anchors
var a = item.contents(),
containsAnchor = false,
nodes = [];
$(a).each(function () {
if (!$(this).is('ul')) {
nodes.push(this);
} else {
return false;
}
if($(this).is("a")) {
containsAnchor = true;
}
});
var wrapElement = $(
'<' + settings.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + prefix + '_item"/>'
);
// wrap item text with tag and add classes unless we are separating parent links
if ((!settings.allowParentLinks || settings.nestedParentLinks) || !containsAnchor) {
var $wrap = $(nodes).wrapAll(wrapElement).parent();
$wrap.addClass(prefix+'_row');
} else
$(nodes).wrapAll('<span class="'+prefix+'_parent-link '+prefix+'_row"/>').parent();
if (!settings.showChildren) {
item.addClass(prefix+'_collapsed');
} else {
item.addClass(prefix+'_open');
}
item.addClass(prefix+'_parent');
// create parent arrow. wrap with link if parent links and separating
var arrowElement = $('<span class="'+prefix+'_arrow">'+(settings.showChildren?settings.openedSymbol:settings.closedSymbol)+'</span>');
if (settings.allowParentLinks && !settings.nestedParentLinks && containsAnchor)
arrowElement = arrowElement.wrap(wrapElement).parent();
//append arrow
$(nodes).last().after(arrowElement);
} else if ( item.children().length === 0) {
item.addClass(prefix+'_txtnode');
}
// accessibility for links
item.children('a').attr('role', 'menuitem').click(function(event){
//Ensure that it's not a parent
if (settings.closeOnClick && !$(event.target).parent().closest('li').hasClass(prefix+'_parent')) {
//Emulate menu close if set
$($this.btn).click();
}
});
//also close on click if parent links are set
if (settings.closeOnClick && settings.allowParentLinks) {
item.children('a').children('a').click(function (event) {
//Emulate menu close
$($this.btn).click();
});
item.find('.'+prefix+'_parent-link a:not(.'+prefix+'_item)').click(function(event){
//Emulate menu close
$($this.btn).click();
});
}
});
// structure is in place, now hide appropriate items
$(items).each(function () {
var data = $(this).data('menu');
if (!settings.showChildren){
$this._visibilityToggle(data.children, null, false, null, true);
}
});
// finally toggle entire menu
$this._visibilityToggle($this.mobileNav, null, false, 'init', true);
// accessibility for menu button
$this.mobileNav.attr('role','menu');
// outline prevention when using mouse
$(document).mousedown(function(){
$this._outlines(false);
});
$(document).keyup(function(){
$this._outlines(true);
});
// menu button click
$($this.btn).click(function (e) {
e.preventDefault();
$this._menuToggle();
});
// click on menu parent
$this.mobileNav.on('click', '.' + prefix + '_item', function (e) {
e.preventDefault();
$this._itemClick($(this));
});
// check for keyboard events on menu button and menu parents
$($this.btn).keydown(function (e) {
var ev = e || event;
switch(ev.keyCode) {
case Keyboard.ENTER:
case Keyboard.SPACE:
case Keyboard.DOWN:
e.preventDefault();
if (ev.keyCode !== Keyboard.DOWN || !$($this.btn).hasClass(prefix+'_open')){
$this._menuToggle();
}
$($this.btn).next().find('[role="menuitem"]').first().focus();
break;
}
});
$this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
var ev = e || event;
switch(ev.keyCode) {
case Keyboard.ENTER:
e.preventDefault();
$this._itemClick($(e.target));
break;
case Keyboard.RIGHT:
e.preventDefault();
if ($(e.target).parent().hasClass(prefix+'_collapsed')) {
$this._itemClick($(e.target));
}
$(e.target).next().find('[role="menuitem"]').first().focus();
break;
}
});
$this.mobileNav.on('keydown', '[role="menuitem"]', function(e) {
var ev = e || event;
switch(ev.keyCode){
case Keyboard.DOWN:
e.preventDefault();
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
var idx = allItems.index( e.target );
var nextIdx = idx + 1;
if (allItems.length <= nextIdx) {
nextIdx = 0;
}
var next = allItems.eq( nextIdx );
next.focus();
break;
case Keyboard.UP:
e.preventDefault();
var allItems = $(e.target).parent().parent().children().children('[role="menuitem"]:visible');
var idx = allItems.index( e.target );
var next = allItems.eq( idx - 1 );
next.focus();
break;
case Keyboard.LEFT:
e.preventDefault();
if ($(e.target).parent().parent().parent().hasClass(prefix+'_open')) {
var parent = $(e.target).parent().parent().prev();
parent.focus();
$this._itemClick(parent);
} else if ($(e.target).parent().parent().hasClass(prefix+'_nav')){
$this._menuToggle();
$($this.btn).focus();
}
break;
case Keyboard.ESCAPE:
e.preventDefault();
$this._menuToggle();
$($this.btn).focus();
break;
}
});
// allow links clickable within parent tags if set
if (settings.allowParentLinks && settings.nestedParentLinks) {
$('.'+prefix+'_item a').click(function(e){
e.stopImmediatePropagation();
});
}
};
//toggle menu
Plugin.prototype._menuToggle = function (el) {
var $this = this;
var btn = $this.btn;
var mobileNav = $this.mobileNav;
if (btn.hasClass(prefix+'_collapsed')) {
btn.removeClass(prefix+'_collapsed');
btn.addClass(prefix+'_open');
} else {
btn.removeClass(prefix+'_open');
btn.addClass(prefix+'_collapsed');
}
btn.addClass(prefix+'_animating');
$this._visibilityToggle(mobileNav, btn.parent(), true, btn);
};
// toggle clicked items
Plugin.prototype._itemClick = function (el) {
var $this = this;
var settings = $this.settings;
var data = el.data('menu');
if (!data) {
data = {};
data.arrow = el.children('.'+prefix+'_arrow');
data.ul = el.next('ul');
data.parent = el.parent();
//Separated parent link structure
if (data.parent.hasClass(prefix+'_parent-link')) {
data.parent = el.parent().parent();
data.ul = el.parent().next('ul');
}
el.data('menu', data);
}
if (data.parent.hasClass(prefix+'_collapsed')) {
data.arrow.html(settings.openedSymbol);
data.parent.removeClass(prefix+'_collapsed');
data.parent.addClass(prefix+'_open');
data.parent.addClass(prefix+'_animating');
$this._visibilityToggle(data.ul, data.parent, true, el);
} else {
data.arrow.html(settings.closedSymbol);
data.parent.addClass(prefix+'_collapsed');
data.parent.removeClass(prefix+'_open');
data.parent.addClass(prefix+'_animating');
$this._visibilityToggle(data.ul, data.parent, true, el);
}
};
// toggle actual visibility and accessibility tags
Plugin.prototype._visibilityToggle = function(el, parent, animate, trigger, init) {
var $this = this;
var settings = $this.settings;
var items = $this._getActionItems(el);
var duration = 0;
if (animate) {
duration = settings.duration;
}
function afterOpen(trigger, parent) {
$(trigger).removeClass(prefix+'_animating');
$(parent).removeClass(prefix+'_animating');
//Fire afterOpen callback
if (!init) {
settings.afterOpen(trigger);
}
}
function afterClose(trigger, parent) {
el.attr('aria-hidden','true');
items.attr('tabindex', '-1');
$this._setVisAttr(el, true);
el.hide(); //jQuery 1.7 bug fix
$(trigger).removeClass(prefix+'_animating');
$(parent).removeClass(prefix+'_animating');
//Fire init or afterClose callback
if (!init){
settings.afterClose(trigger);
} else if (trigger == 'init'){
settings.init();
}
}
if (el.hasClass(prefix+'_hidden')) {
el.removeClass(prefix+'_hidden');
//Fire beforeOpen callback
if (!init) {
settings.beforeOpen(trigger);
}
if (settings.animations === 'jquery') {
el.stop(true,true).slideDown(duration, settings.easingOpen, function(){
afterOpen(trigger, parent);
});
} else if(settings.animations === 'velocity') {
el.velocity("finish").velocity("slideDown", {
duration: duration,
easing: settings.easingOpen,
complete: function() {
afterOpen(trigger, parent);
}
});
}
el.attr('aria-hidden','false');
items.attr('tabindex', '0');
$this._setVisAttr(el, false);
} else {
el.addClass(prefix+'_hidden');
//Fire init or beforeClose callback
if (!init){
settings.beforeClose(trigger);
}
if (settings.animations === 'jquery') {
el.stop(true,true).slideUp(duration, this.settings.easingClose, function() {
afterClose(trigger, parent)
});
} else if (settings.animations === 'velocity') {
el.velocity("finish").velocity("slideUp", {
duration: duration,
easing: settings.easingClose,
complete: function() {
afterClose(trigger, parent);
}
});
}
}
};
// set attributes of element and children based on visibility
Plugin.prototype._setVisAttr = function(el, hidden) {
var $this = this;
// select all parents that aren't hidden
var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
// iterate over all items setting appropriate tags
if (!hidden) {
nonHidden.each(function(){
var ul = $(this);
ul.attr('aria-hidden','false');
var items = $this._getActionItems(ul);
items.attr('tabindex', '0');
$this._setVisAttr(ul, hidden);
});
} else {
nonHidden.each(function(){
var ul = $(this);
ul.attr('aria-hidden','true');
var items = $this._getActionItems(ul);
items.attr('tabindex', '-1');
$this._setVisAttr(ul, hidden);
});
}
};
// get all 1st level items that are clickable
Plugin.prototype._getActionItems = function(el) {
var data = el.data("menu");
if (!data) {
data = {};
var items = el.children('li');
var anchors = items.find('a');
data.links = anchors.add(items.find('.'+prefix+'_item'));
el.data('menu', data);
}
return data.links;
};
Plugin.prototype._outlines = function(state) {
if (!state) {
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
} else {
$('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
}
};
Plugin.prototype.toggle = function(){
var $this = this;
$this._menuToggle();
};
Plugin.prototype.open = function(){
var $this = this;
if ($this.btn.hasClass(prefix+'_collapsed')) {
$this._menuToggle();
}
};
Plugin.prototype.close = function(){
var $this = this;
if ($this.btn.hasClass(prefix+'_open')) {
$this._menuToggle();
}
};
$.fn[mobileMenu] = function ( options ) {
var args = arguments;
// Is the first parameter an object (options), or was omitted, instantiate a new instance
if (options === undefined || typeof options === 'object') {
return this.each(function () {
// Only allow the plugin to be instantiated once due to methods
if (!$.data(this, 'plugin_' + mobileMenu)) {
// if it has no instance, create a new one, pass options to our plugin constructor,
// and store the plugin instance in the elements jQuery data object.
$.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
}
});
// If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
// Cache the method call to make it possible to return a value
var returns;
this.each(function () {
var instance = $.data(this, 'plugin_' + mobileMenu);
// Tests that there's already a plugin-instance and checks that the requested public method exists
if (instance instanceof Plugin && typeof instance[options] === 'function') {
// Call the method of our plugin instance, and pass it the supplied arguments.
returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
}
});
// If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
return returns !== undefined ? returns : this;
}
};
}(jQuery, document, window));- slicknav.min.css
/*!
* SlickNav Responsive Mobile Menu v1.0.10
* (c) 2016 Josh Cope
* licensed under MIT
*/.slicknav_btn,.slicknav_nav .slicknav_item{cursor:pointer}.slicknav_menu,.slicknav_menu *{box-sizing:border-box}.slicknav_btn{position:relative;display:block;vertical-align:middle;float:right;padding:.438em .625em;line-height:1.125em}.slicknav_btn .slicknav_icon-bar+.slicknav_icon-bar{margin-top:.188em}.slicknav_menu .slicknav_menutxt{display:block;line-height:1.188em;float:left;color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.slicknav_menu .slicknav_icon{float:left;width:1.125em;height:.875em;margin:.188em 0 0 .438em}.slicknav_menu .slicknav_icon:before{background:0 0;width:1.125em;height:.875em;display:block;content:"";position:absolute}.slicknav_menu .slicknav_no-text{margin:0}.slicknav_menu .slicknav_icon-bar{display:block;width:1.125em;height:.125em;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 0 rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.25)}.slicknav_menu:after,.slicknav_menu:before{content:" ";display:table}.slicknav_menu:after{clear:both}.slicknav_nav li,.slicknav_nav ul{display:block}.slicknav_nav .slicknav_arrow{font-size:.8em;margin:0 0 0 .4em}.slicknav_nav .slicknav_item a{display:inline}.slicknav_nav .slicknav_row,.slicknav_nav a{display:block}.slicknav_nav .slicknav_parent-link a{display:inline}.slicknav_menu{*zoom:1;font-size:16px;background:#4c4c4c;padding:5px}.slicknav_nav,.slicknav_nav ul{list-style:none;overflow:hidden;padding:0}.slicknav_menu .slicknav_icon-bar{background-color:#fff}.slicknav_btn{margin:5px 5px 6px;text-decoration:none;text-shadow:0 1px 1px rgba(255,255,255,.75);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;background-color:#222}.slicknav_nav{clear:both;color:#fff;margin:0;font-size:.875em}.slicknav_nav ul{margin:0 0 0 20px}.slicknav_nav .slicknav_row,.slicknav_nav a{padding:5px 10px;margin:2px 5px}.slicknav_nav .slicknav_row:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#fff}.slicknav_nav a{text-decoration:none;color:#fff}.slicknav_nav a:hover{-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background:#ccc;color:#222}.slicknav_nav .slicknav_txtnode{margin-left:15px}.slicknav_nav .slicknav_item a,.slicknav_nav .slicknav_parent-link a{padding:0;margin:0}.slicknav_brand{float:left;color:#fff;font-size:18px;line-height:30px;padding:7px 12px;height:44px}答案
我认为您在这里使用了许多不需要的代码。我的建议是，请访问w3学校网站。另一个建议是不通过网站模板。因为在模板中它们是使用SCSS / SASS开发的。会生成CSS代码。因此，使用模板可以找到样式，但确实很难。
以上是关于使用引导程序时，下拉菜单在移动屏幕上不起作用的主要内容，如果未能解决你的问题，请参考以下文章