757px 미만의 해상도에 대한 간단한 탐색이 있습니다. 데스크톱 브라우저의 크기를 조정하면 작동하지만 모바일 브라우저에서는 작동하지 않습니다. 바이올린에서도 작동하지만 실제 모바일 브라우저에서는 작동하지 않습니다 ( 서버에 프로젝트를 업로드했습니다)
이제 데스크탑에서 작동하지 않거나 링크에 대한 d-none 클래스를 제거 할 수 없습니다.
HTML 코드
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<header>
<div class="clearfix mx-3 my-2 d-md-none">
<label class="float-left">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="show()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="hide()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled d-none" id="links">
<p><a href="/units" class="text-white">واحدها</a><p>
<p> <a href="/fruits" class="text-white">محصولات</a></p>
<p> <a href="/pages/درباره-ما"
class="text-white">درباره ما</a></p>
<p> <a href="/all" class="text-white">اخبار</a></p>
<p> <a href="/contact" class="text-white">ارتباط با ما</a></p>
</ul>
</div>
</header>
</body>
</html>
CSS
#my-menu{
position: relative;
}
#links{
position: absolute;
padding: 30px 25px;
border-radius: 7px;
background-color: #3CB371;
text-align: center;
color: white;
transition:all .5s ease;
z-index: 10;
}
자바 스크립트
function show() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
function hide() {
document.getElementById("links").classList.toggle('d-none');
document.getElementById('sign-one').classList.toggle('d-none');
document.getElementById('sign-two').classList.toggle('d-none');
}
미리 감사드립니다
나는 당신의 코드를 약간 변경했습니다. jsfiddle 작업 데모
HTML
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
</head>
<body>
<header>
<div class="clearfix mx-3 my-2">
<label class="float-left d-none">
<i class="fas fa-bars fa-2x p-1" role="button" id="sign-one" onclick="toggle()"></i>
<i class="fas fa-times fa-2x d-none p-1" role="button" id="sign-two" onclick="toggle()"></i>
</label>
</div>
<div id="my-menu">
<ul class="list-unstyled" id="links">
<li>
<a href="/units" class="text-white">واحدها</a>
<p></p>
<p><a href="/fruits" class="text-white">محصولات</a></p>
<p><a href="/pages/درباره-ما" class="text-white">درباره ما</a></p>
<p><a href="/all" class="text-white">اخبار</a></p>
<p><a href="/contact" class="text-white">ارتباط با ما</a></p>
</li>
</ul>
</div>
</header>
</body>
</html>
js
const navIcon = document.querySelector('.float-left')
const menu = document.querySelector('#my-menu')
const signOne = document.getElementById('sign-one');
const signTwo = document.getElementById('sign-two');
function toggle() {
signOne.classList.toggle('d-none');
signTwo.classList.toggle('d-none');
menu.classList.toggle('d-none')
}
function responsive(e) {
if (window.innerWidth < 757) {
navIcon.classList.remove('d-none')
menu.classList.add('d-none')
// If sign-two not hidden then menu shown on less then 757px screen
if (!signTwo.classList.contains('d-none')) {
menu.classList.remove('d-none')
}
} else {
navIcon.classList.add('d-none')
menu.classList.remove('d-none')
}
}
window.addEventListener('resize', responsive);
window.addEventListener('load', responsive);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다