我正在为我的网站（一个 DIY 博客）构建一个移动响应模板，该模板位于 Blogger 上（我将它放在私人博客上，直到它准备好上线，所以很遗憾我无法向您展示确切的模板）和我正在为我的移动菜单使用 SlickNav。在标题下方有一个顶部的“粘性”菜单和一个附加菜单。顶部菜单工作正常，但第二个菜单在移动设备上同时显示桌面菜单和移动菜单。当我将其设置为“显示：无”时，两者都会消失，而不仅仅是桌面菜单。顶部菜单是 Blogger“页面”小部件，第二个菜单是下拉 html/css 菜单。
此外，第一个菜单项会在悬停时跳转。
我该如何 a) 在移动设备上隐藏桌面版本 b) 修复悬停时的跳转？
这是我第一次在这里发帖，我不是编码方面的专业人士，所以希望我正确分享了所有内容:) 提前感谢您的帮助！
/*!
SlickNav Responsive Mobile Menu
(c) 2014 Josh Cope
licensed under MIT
*/
;
(function(e, t, n) {
function o(t, n) {
this.element = t;
this.settings = e.extend({}, r, n);
this._defaults = r;
this._name = i;
this.init()
}
var r = {
label: "MENU",
duplicate: true,
duration: 200,
easingOpen: "swing",
easingClose: "swing",
closedSymbol: "►",
openedSymbol: "▼",
prependTo: "body",
parentTag: "a",
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
init: function() {},
open: function() {},
close: function() {}
},
i = "slicknav",
s = "slicknav";
o.prototype.init = function() {
var n = this;
var r = e(this.element);
var i = this.settings;
if (i.duplicate) {
n.mobileNav = r.clone();
n.mobileNav.removeAttr("id");
n.mobileNav.find("*").each(function(t, n) {
e(n).removeAttr("id")
})
} else n.mobileNav = r;
var o = s + "_icon";
if (i.label === "") {
o += " " + s + "_no-text"
}
if (i.parentTag == "a") {
i.parentTag = 'a href="#"'
}
n.mobileNav.attr("class", s + "_nav");
var u = e('<div class="' + s + '_menu"></div>');
n.btn = e("<" + i.parentTag + ' aria-haspopup="true" tabindex="0" class="' + s + "_btn " + s + '_collapsed"><span class="' + s + '_menutxt">' + i.label + '</span><span class="' + o + '"><span class="' + s + '_icon-bar"></span><span class="' + s + '_icon-bar"></span><span class="' + s + '_icon-bar"></span></span></a>');
e(u).append(n.btn);
e(i.prependTo).prepend(u);
u.append(n.mobileNav);
var a = n.mobileNav.find("li");
e(a).each(function() {
var t = e(this);
var r = {};
r.children = t.children("ul").attr("role", "menu");
t.data("menu", r);
if (r.children.length > 0) {
var o = t.contents();
var u = false;
var a = [];
e(o).each(function() {
if (!e(this).is("ul")) {
a.push(this)
} else {
return false
} if (e(this).is("a")) {
u = true
}
});
var f = e("<" + i.parentTag + ' role="menuitem" aria-haspopup="true" tabindex="-1" class="' + s + '_item"/>');
if (!i.allowParentLinks || i.nestedParentLinks || !u) {
var l = e(a).wrapAll(f).parent();
l.addClass(s + "_row")
} else e(a).wrapAll('<span class="' + s + "_parent-link " + s + '_row"/>').parent();
t.addClass(s + "_collapsed");
t.addClass(s + "_parent");
var c = e('<span class="' + s + '_arrow">' + i.closedSymbol + "</span>");
if (i.allowParentLinks && !i.nestedParentLinks && u) c = c.wrap(f).parent();
e(a).last().after(c)
} else if (t.children().length === 0) {
t.addClass(s + "_txtnode")
}
t.children("a").attr("role", "menuitem").click(function(t) {
if (i.closeOnClick && !e(t.target).parent().closest("li").hasClass(s + "_parent")) e(n.btn).click()
});
if (i.closeOnClick && i.allowParentLinks) {
t.children("a").children("a").click(function(t) {
e(n.btn).click()
});
t.find("." + s + "_parent-link a:not(." + s + "_item)").click(function(t) {
e(n.btn).click()
})
}
});
e(a).each(function() {
var t = e(this).data("menu");
if (!i.showChildren) {
n._visibilityToggle(t.children, null, false, null, true)
}
});
n._visibilityToggle(n.mobileNav, null, false, "init", true);
n.mobileNav.attr("role", "menu");
e(t).mousedown(function() {
n._outlines(false)
});
e(t).keyup(function() {
n._outlines(true)
});
e(n.btn).click(function(e) {
e.preventDefault();
n._menuToggle()
});
n.mobileNav.on("click", "." + s + "_item", function(t) {
t.preventDefault();
n._itemClick(e(this))
});
e(n.btn).keydown(function(e) {
var t = e || event;
if (t.keyCode == 13) {
e.preventDefault();
n._menuToggle()
}
});
n.mobileNav.on("keydown", "." + s + "_item", function(t) {
var r = t || event;
if (r.keyCode == 13) {
t.preventDefault();
n._itemClick(e(t.target))
}
});
if (i.allowParentLinks && i.nestedParentLinks) {
e("." + s + "_item a").click(function(e) {
e.stopImmediatePropagation()
})
}
};
o.prototype._menuToggle = function(e) {
var t = this;
var n = t.btn;
var r = t.mobileNav;
if (n.hasClass(s + "_collapsed")) {
n.removeClass(s + "_collapsed");
n.addClass(s + "_open")
} else {
n.removeClass(s + "_open");
n.addClass(s + "_collapsed")
}
n.addClass(s + "_animating");
t._visibilityToggle(r, n.parent(), true, n)
};
o.prototype._itemClick = function(e) {
var t = this;
var n = t.settings;
var r = e.data("menu");
if (!r) {
r = {};
r.arrow = e.children("." + s + "_arrow");
r.ul = e.next("ul");
r.parent = e.parent();
if (r.parent.hasClass(s + "_parent-link")) {
r.parent = e.parent().parent();
r.ul = e.parent().next("ul")
}
e.data("menu", r)
}
if (r.parent.hasClass(s + "_collapsed")) {
r.arrow.html(n.openedSymbol);
r.parent.removeClass(s + "_collapsed");
r.parent.addClass(s + "_open");
r.parent.addClass(s + "_animating");
t._visibilityToggle(r.ul, r.parent, true, e)
} else {
r.arrow.html(n.closedSymbol);
r.parent.addClass(s + "_collapsed");
r.parent.removeClass(s + "_open");
r.parent.addClass(s + "_animating");
t._visibilityToggle(r.ul, r.parent, true, e)
}
};
o.prototype._visibilityToggle = function(t, n, r, i, o) {
var u = this;
var a = u.settings;
var f = u._getActionItems(t);
var l = 0;
if (r) l = a.duration;
if (t.hasClass(s + "_hidden")) {
t.removeClass(s + "_hidden");
t.slideDown(l, a.easingOpen, function() {
e(i).removeClass(s + "_animating");
e(n).removeClass(s + "_animating");
if (!o) {
a.open(i)
}
});
t.attr("aria-hidden", "false");
f.attr("tabindex", "0");
u._setVisAttr(t, false)
} else {
t.addClass(s + "_hidden");
t.slideUp(l, this.settings.easingClose, function() {
t.attr("aria-hidden", "true");
f.attr("tabindex", "-1");
u._setVisAttr(t, true);
t.hide();
e(i).removeClass(s + "_animating");
e(n).removeClass(s + "_animating");
if (!o) a.close(i);
else if (i == "init") a.init()
})
}
};
o.prototype._setVisAttr = function(t, n) {
var r = this;
var i = t.children("li").children("ul").not("." + s + "_hidden");
if (!n) {
i.each(function() {
var t = e(this);
t.attr("aria-hidden", "false");
var i = r._getActionItems(t);
i.attr("tabindex", "0");
r._setVisAttr(t, n)
})
} else {
i.each(function() {
var t = e(this);
t.attr("aria-hidden", "true");
var i = r._getActionItems(t);
i.attr("tabindex", "-1");
r._setVisAttr(t, n)
})
}
};
o.prototype._getActionItems = function(e) {
var t = e.data("menu");
if (!t) {
t = {};
var n = e.children("li");
var r = n.find("a");
t.links = r.add(n.find("." + s + "_item"));
e.data("menu", t)
}
return t.links
};
o.prototype._outlines = function(t) {
if (!t) {
e("." + s + "_item, ." + s + "_btn").css("outline", "none")
} else {
e("." + s + "_item, ." + s + "_btn").css("outline", "")
}
};
o.prototype.toggle = function() {
var e = this;
e._menuToggle()
};
o.prototype.open = function() {
var e = this;
if (e.btn.hasClass(s + "_collapsed")) {
e._menuToggle()
}
};
o.prototype.close = function() {
var e = this;
if (e.btn.hasClass(s + "_open")) {
e._menuToggle()
}
};
e.fn[i] = function(t) {
var n = arguments;
if (t === undefined || typeof t === "object") {
return this.each(function() {
if (!e.data(this, "plugin_" + i)) {
e.data(this, "plugin_" + i, new o(this, t))
}
})
} else if (typeof t === "string" && t[0] !== "_" && t !== "init") {
var r;
this.each(function() {
var s = e.data(this, "plugin_" + i);
if (s instanceof o && typeof s[t] === "function") {
r = s[t].apply(s, Array.prototype.slice.call(n, 1))
}
});
return r !== undefined ? r : this
}
}
})(jQuery, document, window)
//]]></script>
< script type = 'text/javascript' > //<![CDATA[
jQuery(document).ready(function($) {
"use strict";
$('#top-search a').on('click', function(e) {
e.preventDefault();
$('.show-search').slideToggle('fast');
});
$('.to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade',
pager: false,
captions: true
});
$(document).ready(function() {
$(".container").fitVids();
});
$('.menu').slicknav({
prependTo: '.menu-mobile',
label: ''
});
$('#dropdownmenu').slicknav({
prependTo: '#dropdown'
});
});
$('.separator').css('float', '');
$('.separator,.separator a').css('margin-left', '').css('margin-right', '').css('margin-bottom', '');
//]]></script>/********************************/
/*** Navigation ***/
/********************************/
#dropdownmenu {
background-color: #ffffff;
width: 100%;
color: #009999;
letter-spacing: 2px;
font-size: 14px;
margin: 0px;
padding: 10px 0 0 0;
position: relative;
height: 45px;
border-top: 1px solid #009999;
border-bottom: 1px solid #009999;
}
#dropdown {
display: inline-block;
text-align: center;
margin: 0px;
padding: 0px;
}
#dropdown ul {
overflow: hidden;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
border: 1px solid #f3f2ee;
}
#dropdown li {
list-style: none;
margin: 0px;
padding: 0px;
border-left: 0px solid #009999;
border-right: 0px solid #009999;
height: auto;
}
#dropdown li a,
#dropdown li a:link,
#dropdown li a:visited {
color: #009999;
display: inline-block;
font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0px 0px 0px 0px;
padding: 9px 5px 10px 0px;
text-decoration: none;
}
#dropdown li a:hover,
#dropdown li a:active {
background: #ffffff;
color: #c6c1ae;
display: block;
text-decoration: none;
padding: 9px 5px 10px 0px;
}
#dropdown li {
float: left;
padding: 0px 66px;
}
#dropdown li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 220px;
margin: 0;
padding: 0px;
}
#dropdown li ul a {
width: 220px;
}
#dropdown li ul ul {
margin: 0px 0 0 0px;
}
#dropdown li:hover ul ul,
#dropdown li:hover ul ul ul,
#dropdown li.sfhover ul ul,
#dropdown li.sfhover ul ul ul {
left: -999em;
}
#dropdown li:hover ul,
#dropdown li li:hover ul,
#dropdown li li li:hover ul,
#dropdown li.sfhover ul,
#dropdown li li.sfhover ul,
#dropdown li li li.sfhover ul {
left: auto;
}
#dropdown li:hover,
#dropdown li.sfhover {
position: static;
}
#dropdown li li a,
#dropdown li li a:link,
#dropdown li li a:visited {
background: #ffffff;
width: 130px;
text-align: left;
color: #009999;
display: block;
font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index: 9999;
border-bottom: 0px solid #009999;
}
#dropdown li li a:hover,
#dropdown li li a:active {
background: #ffffff;
color: #c6c1ae;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#navigation {
background: #F1F1F1;
height: 55px;
position: fixed;
z-index: 999;
width: 100%;
-webkit-backface-visibility: hidden;
border-bottom: 1px solid #F0F0F0;
}
.slicknav_menu {
display: none;
}
#navigation .container {
position: relative;
}
.menu {
float: left;
}
.menu li {
display: inline-block;
margin-right: 12px;
position: relative;
}
.menu li a {
font: $(navbar.text.font);
font-weight: 400;
letter-spacing: 2px;
color: $(navbar.text.color);
line-height: 55px;
text-transform: uppercase;
display: inline-block;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
}
ul.sub-menu li:after {
content: "|";
padding-left: 10px;
color: #565656;
display: none;
}
@media only screen and (max-width: 767px) {
/* second slicknav dropdown menu */
#dropdown .slicknav_menu {
width: 100%;
text-align: center;
display: block;
background: #ffffff;
border-top: 1px solid #009999;
border-bottom: 1px solid #009999;
}
#dropdown .slicknav_btn {
display: inline-block;
float: none;
text-align: center;
}
#dropdown .slicknav_menu ul {
float: left;
text-align: left;
}
.subscribe-box .block,
.container {
width: 320px;
}
#navigation-wrapper {
display: none;
}
.slicknav_menu {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='navigation'>
<div class='container'>
<b:section id='navigation-wrapper' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content menu'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + "_select"'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'>
<data:link.title/>
</option>
<b:else/>
<option expr:value='data:link.href'>
<data:link.title/>
</option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&#9660;</span>
<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'>
<a expr:href='data:link.href'>
<data:link.title/>
</a>
</li>
<b:else/>
<li>
<a expr:href='data:link.href'>
<data:link.title/>
</a>
</li>
</b:if>
</b:loop>
</ul>
</b:if>
<b:include name='quickedit' />
</div>
</b:includable>
</b:widget>
</b:section>
<center>
<!-- start dropdown -->
<div id="dropdownmenu">
<ul id="dropdown">
<a class="menuDrop">
<li><a href="/">START HERE</a>
</li>
<li><a href="#">
DIY</a>
<ul>
<li><a href="http://www.theinspiredhive.com/p/diy.html">Project Gallery</a>
</li>
<li><a href="http://www.theinspiredhive.com/p/monthly-diy-challenge.html">Monthly DIY Challenge</a>
</li>
<li><a href="/search/label/round%20up">Baby</a>
</li>
<li><a href="#">Wedding Crafts</a>
</li>
</ul>
</li>
<li><a href="http://www.theinspiredhive.com/p/home-tour.html">HOME TOUR</a>
</li>
<li><a href="#">
POPULAR POSTS</a>
<ul>
<li><a href="http://www.theinspiredhive.com/p/about.html">Meet The B's</a>
</li>
<li><a href="/search/label/baby">Pregnancy & Baby</a>
</li>
<li><a href="http://www.theinspiredhive.com/p/our-wedding.html">Wedding</a>
</li>
</ul>
</li>
<li><a href="http://www.theinspiredhive.com/p/home-tour.html">BLOGGING RESOURCES</a>
</li>
</a>
</ul>
</div>
<!-- end dropdown -->
</center>