- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
目前,我的导航栏包含指向一页上各部分的链接,没有任何指向其他页面的链接。单击链接时,它会自动转到该页面上的相应 div,但是,目标 div 的一部分被导航栏覆盖,该导航栏保持打开状态,直到单击关闭按钮。
我的问题是,有没有办法在单击链接后强制关闭标题?
HTML:
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li><a href="#features-wrapper">View all</a></li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li><a href="#htb">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li><a href="#faq">View all</a></li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li><a href="http://www.oxfordproducts.com/motorcycle/where_to_buy" target="_blank">Store locator</a></li>
<li><a href="https://www.oxfordproducts.com/trade/login.php" target="_blank">Trade customer login</a></li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<a href="http://oxfordluggage.com/"><img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo"></a>
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
CSS:
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
@media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
@media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
@media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
@media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
@keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
@-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
@-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
@-ms-@keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
JS:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
});
最佳答案
在您的 js 文件中添加此 jquery 函数:
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
这里是理解的片段:
$(document).ready(function () {
function openMenu() {
$(".menu-trigger").addClass("open");
$(".navigation").addClass("nav-open");
$(".col").addClass("c-in");
}
function closeMenu() {
$(".menu-trigger").removeClass("open");
$(".navigation").removeClass("nav-open");
$(".col").removeClass("c-in");
}
$(".menu-trigger").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
} else {
openMenu();
}
});
$("main").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
});
$(document).keyup(function (e) {
if (e.keyCode == 27) {
closeMenu();
}
});
$("a").click(function () {
if ($(".menu-trigger").hasClass("open")) {
closeMenu();
}
})
});
.menu {
position: fixed;
top: 0;
left: 0;
width: 102%;
z-index: 20;
background: black;
height: 90px;}
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 200px);
padding: 0 200px;}
.logo{
height: 40px;
width: auto;
position: absolute;
top: 25px;
left: 40px;}
.menu-trigger {
position: absolute;
top: 18.5px;
right: 255px;
height: 55px;
width: 60px;
cursor: pointer;
transition: opacity 130ms ease-out;
-webkit-transition: opacity 130ms ease-out;
-moz-transition: opacity 130ms ease-out;
-ms-transition: opacity 130ms ease-out;}
.menu-trigger:hover {
opacity: 1;}
.menu-trigger h5 {
position: absolute;
right: 10px;
top: 9px;
text-transform: uppercase;
color: #fff;
user-select: none;
-webkit-user-select:none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
transition: color 300ms ease-out;
-webkit-transition: color 300ms ease-out;
-moz-transition: color 300ms ease-out;
-ms-transition: color 300ms ease-out;}
.menu-trigger .bar {
position: absolute;
left: 10px;
width: 40px;
height: 5px;
background: #fff;
transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-webkit-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-moz-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;
-ms-transition: transform 180ms ease-out, opacity 160ms ease-out, top 180ms ease-out, width 120ms ease-out, background 300ms ease-out;}
.bar--1 {
top: 15px; }
.bar--2 {
top: 25px}
.bar--3 {
top: 35px;}
.open, .open:hover {
opacity: 1 !important;}
.open h5 {
color: #fff;}
.open .bar {
background: #fff; }
.open .bar--1 {
top: 21px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg); }
.open .bar--2 {
opacity: 0;
width: 0px; }
.open .bar--3 {
top: 21px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);}
.navigation {
visibility: hidden;
position: fixed;
z-index: 19;
top: 20px;
left: 0;
width: 100%;
max-width: 100%;
background: #FFFFFF;
box-shadow: 0px 6px 8px rgba(0,0,0,0.13);
padding: 100px 0 20px 0;
opacity: 0;
transform-origin: center top;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform: scale(0.9);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 190ms ease-out, transform 40ms ease-out;
-webkit-transition: opacity 190ms ease-out, transform 40ms ease-out;
-moz-transition: opacity 190ms ease-out, transform 40ms ease-out;
-ms-transition: opacity 190ms ease-out, transform 40ms ease-out;}
.navigation .container {
padding: 0 18px; }
.nav-open {
visibility: visible;
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);}
nav {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-start;
flex-flow: row wrap;}
nav h3 {
font-family: 'Univers';
position: relative;
display: block;
margin: 0 0 15px 0;
color: black;
font-size: 1.2em;
font-weight: 600;
text-transform: uppercase;}
nav ul {
position: relative;
padding: 0 0;
margin: 0 0;
width: 100%;
max-width: 100%;
list-style-type: none;}
nav li {
display: block;
color: #919191 !important;
font-size: 0.88em;
font-family: 'helvetica';
margin: 6px 0;
font-weight: 400;
letter-spacing: 0.025em;}
nav li{}
nav li > a > i {
color: #121212;
font-size: 1.4em;
margin-right: 8px;
display: inline-block;
transform: translateY(1px);
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
-ms-transform: translateY(1px);
opacity: 0.6; }
nav .social-link {
float: left;
width: 44px;
height: 44px;
line-height: 48px;
border-radius: 44px;
text-align: center;
margin: 5px;
cursor: pointer;
transition: all 0.25s ease-in-out;}
nav .social-link > i:hover {
color: black; }
nav .social-link:last-child {
margin-right: 0px; }
nav .social-link > i {
color: #B5B5B5;
font-size: 1.57em;
margin: 0 auto; }
nav .col {
min-height: auto;
width: auto;
flex-direction: row;
margin: 0 auto;
margin-bottom: 25px;
text-align: left;
transform: translateY(25px);
-webkit-transform: translateY(25px);
-moz-transform: translateY(25px);
-ms-transform: translateY(25px);
opacity: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform, opacity; }
.c-in {
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-ms-animation-name: fadeInUp;
animation-duration: 860ms;
-webkit-animation-duration: 860ms;
-moz-animation-duration: 860ms;
-ms-animation-duration: 860ms;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-webkit-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-moz-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-ms-animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.col:first-child {
animation-delay: 50ms;
-webkit-animation-delay: 50ms;
-moz-animation-delay: 50ms;
-ms-animation-delay: 50ms;}
.col:nth-child(2) {
animation-delay: 130ms;
-webkit-animation-delay: 130ms;
-moz-animation-delay: 130ms;
-ms-animation-delay: 130ms; }
.col:nth-child(3) {
animation-delay: 210ms;
-webkit-animation-delay: 210ms;
-moz-animation-delay: 210ms;
-ms-animation-delay: 210ms; }
.col:nth-child(4) {
animation-delay: 290ms;
-webkit-animation-delay: 290ms;
-moz-animation-delay: 290ms;
-ms-animation-delay: 290ms; }
main {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto; }
main .container {
padding: 82px 18px 0 18px; }
@media screen and (min-width: 680px) {
nav .col {
width: 50%;
min-height: 136px;} }
@media screen and (min-width: 992px) {
nav .col {
width: auto;
min-height: 136px;}
.search {
max-width: 235px; } }
@media screen and (max-width: 480px) {
.container {
position: relative;
margin: 0 auto;
width: calc(100vw - 100px);
padding: 0 50px;}
.menu-trigger{
right: 20px;
top:15px;}
nav .col {
width: 100% !important;
min-height: 136px; }
nav .social-link{
margin:1px; }
.logo {
height: 30px;
width: auto;
position: absolute;
top: 25px;
left: 9px;
}
}
@media screen and (max-width: 1024px) {
nav{
justify-content: flex-start !important;
align-items: flex-start !important;}
nav .social-link{
margin: 10px; }
nav .col {
min-height: auto !important;
text-align: center; }
.col:nth-child(5) {
display: flex;
justify-content: center !important;
flex-direction: column; }
.search {
max-width: 235px; } }
@keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
@-webkit-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
@-moz-keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
@-ms-@keyframes fadeInUp {
0% {transform: translateY(25px); -webkit-transform: translateY(25px); -moz-transform: translateY(25px); -ms-transform: translateY(25px); opacity: 0;}
100% {transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); opacity: 1;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
<div class="container">
<nav>
<div class="col">
<h3>Why Tracker?</h3>
<ul>
<li><a id="learnmore" href="#intro-block">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>Key Features</h3>
<ul>
<li><a href="#features-wrapper">View all</a></li>
</ul>
</div>
<div class="col">
<h3>How to Buy</h3>
<ul>
<li><a href="#htb">Learn more</a></li>
</ul>
</div>
<div class="col">
<h3>FAQ's</h3>
<ul>
<li><a href="#faq">View all</a></li>
</ul>
</div>
<div class="col">
<h3>Where to Buy</h3>
<ul>
<li><a href="http://www.oxfordproducts.com/motorcycle/where_to_buy" target="_blank">Store locator</a></li>
<li><a href="https://www.oxfordproducts.com/trade/login.php" target="_blank">Trade customer login</a></li>
</ul>
</div>
<div class="col">
<a href="https://www.facebook.com/OxfordProductsLtd/" target="_blank">
<div class="social-link"><i class="fab fa-facebook-f"></i></div>
</a>
<a href="https://twitter.com/oxfordproducts?lang=en" target="_blank">
<div class="social-link"><i class="fab fa-twitter"></i></div>
</a>
<a href="https://www.instagram.com/oxfordproducts/" target="_blank">
<div class="social-link"><i class="fab fa-instagram"></i></div>
</a>
<a href="https://www.youtube.com/user/OxfordProductsLtd" target="_blank">
<div class="social-link"><i class="fab fa-youtube"></i></div>
</a>
</div>
</nav>
</div>
</div>
<div class="menu">
<div class="container">
<a href="http://oxfordluggage.com/"><img class="logo" src="Images/Logos/Oxford-tracker-Logo-white.png" alt="Oxford Tracker logo"></a>
<div class="menu-trigger">
<div class="bar bar--1"></div>
<div class="bar bar--2"></div>
<div class="bar bar--3"></div>
</div>
</div>
</div>
关于javascript - 单击链接后自动关闭菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57327474/
我有一个网站,并且我使用 javascript sdk 添加了“点赞”按钮。 这是代码 (function(d, s, id) { var js, fjs = d.g
我知道 HTML 是逐行读取的。当您链接多个 css 文件(如规范化文件和样式表文件)时,由于 CSS 重要性特异性和源顺序,样式表文件应链接在规范化文件之后。看起来这不会影响链接的 JavaScri
我正在使用官方 Bootstrap site 提供的 CDN 链接在我的网络应用程序中使用面板进行测试 在彻底检查我的代码后,面板没有显示。 但是我在 SO 上看到了类似的帖子并且 CDN 链接不同
这里是编码初学者。我正在尝试为我的移动设备网站设置断点,以便我的网站适合小屏幕。我只是想检查如果我缩小视口(viewport)的宽度,背景颜色是否会改变,但没有发生任何变化。也许我只是对一个简单的错误
举一个我想要的例子,想象一下这个字符串: $text = 'lorem ipsum About us lorem ipsum'; 如果此字符串包含一个 href 以 / 开头的 anchor 链接,则
如何链接到 LaTeX 文档的另一部分或子部分?这种链接的常规范式是什么,像[链接名称]那样写,或者像网页超链接那样写? 最佳答案 链接到另一个部分需要您的部分进行一些额外的标记。要使用的命令是: \
我有一个订单表,其中包含订单号、客户 ID 和代理 ID。然后有一个带有 id 的客户表和一个带有 id 的代理表。 我需要获取所有具有来自代理 ID 'a03' 和代理 ID 'a05' 的订单的客
假设我有: dic = {"z":"zv", "a":"av"} ## Why doesn't the following return a sorted list of keys? keys = d
我在尝试链接到外部库时得到了一些奇怪的结果。如果我从命令行运行以下命令: gcc fftwTest.c -I../extlib/fftw-3.3.5-dll32 -L../extlib/fftw-3.
我认为我没有正确理解 jQuery 链接。我正在遍历一个数组并尝试将 div 元素添加到我的包装器 CSS 类中,每个 div 元素都有一个“click”类和自定义 css top 和 left 属性
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 HTML 超链接(链接) HTML使用标签 a 来设置超文本链接。 超链
这个问题在这里已经有了答案: How do I link to part of a page? (hash?) (7 个答案) Scroll Automatically to the Bottom
我想创建一个 Docker Swarm 集群,运行一个 Elasticsearch 实例、一个 MongoDB 实例和一个 grails 应用程序,每个都在单独的机器上。我正在使用 Docker Ma
我正在尝试将 CakePHP HTML Linker 用于以下代码 Add Cuisine 由于 span 标签需要在 a 标签内。我无法根据需要获得输出。关于如何完成它的任何建议? 最佳答案 禁用链
大家好, 我最近开发了一个应用程序,很快就会提交到 App Store。我想免费提交这个应用程序,并想知道我是否可以实现一个带有 PayPal 捐赠标志的按钮,上面基本上写着“捐赠用于开发”或与此相关
我想尝试在 dlang 中使用 libuv。我下载了这样的 dlang 绑定(bind): git clone git@github.com:tamediadigital/libuv.git 现在我接
我有一个节点(节点 a),各种其他节点(节点 b/c/d/e)与之引用。 我可以创建一个带有参数的 View 作为我正在查看的节点(节点 a),并获取引用该节点的节点列表。 基本上在节点 a 查看节点
我正在尝试建立一个常见问题页面,上面有目录,下面有答案。我想点击目录中的一个问题,并在同一页面上链接到相应的答案。我如何在 CakePHP 中使用 $this->Html->link() 执行此操作方
在 WooCommerce 3.0+ 中,我使用 js 创建了一些选项卡,每个选项卡中包含来自不同类别的产品。我已经设法修改了简单产品的添加到购物车链接,其中点击了 addtocart 按钮它进入下一
Delphi 2007/2009 奇怪的问题在这里: 根据设计时定义的组件属性,是否可以在链接中包含文件或保留文件? 示例:如果我将 SomeProperty 保留为真,则在编译时,单元 SomeUn
我是一名优秀的程序员,十分优秀!