0
私はHTML5、CSS、およびJavascriptの新しい学習者です。私の質問が非常に基本的であれば、謝罪します。私は反応的なナビゲーションメニューに取り組んでいます。ブラウザの幅が500より大きい場合は、垂直ナビゲーションバーが表示されます。画面ページのサイズが500（携帯電話など）未満になったら、水平ナビゲーションバーを非表示にして、ハンバーガーアイコンが表示されます。ハンバーガーメニューをクリックすると、ハンバーガーアイコンの下に垂直ナビゲーションバーが表示されます。 しかし、問題は、setAttribute（ "visibility"、 "visible"）またはsetAttribute（ "visibility"、 "hidden"）をナビゲーションバーで呼び出すと機能しないことです。なぜ私は分からない。 setAttributeは、画面のロード時またはハンバーガーアイコンがクリックされた時のどちらかと呼ばれます。ここ タグ要素のsetAtrribute呼び出しが機能しない
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/page-main.css">
<link rel="stylesheet" href="./css/master.css">
<link rel="stylesheet" href="./css/footer.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<!-- fonts -->
<title>Home Page</title>
</head>
<body onload="hideORShow()">
<header>
<nav id="navigation-links" class="navbar navigation-box">
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./index.html">Home</a>
</div>
<div class="col-1of6 nav-item" >
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</nav>
<div class="open-slide">
<a href="#">
<svg id="hamburgur-icon" onClick="openSlideMenu()">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</div>
<div id="side-menu" class="side-nav" >
<a href="#" class="btn-close" onClick="closeSlideMenu()">×</a>
<a class="main-nav-item-page-index" href="./index.html">Home</a>
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</header>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
var hamburgerMenu = document.getElementById('hamburgur-icon');
var slidingMenu = document.getElementById('side-menu');
var navigationBox = document.getElementById('navigation-links');
function hideORShow(){
if(width > 500){
console.log("Inside of hideOrShow function - Window width is greater than 500px, hiding hamburger");
hamburgerMenu.setAttribute("visibility","hidden");
slidingMenu.setAttribute("visibility","hidden");
}
else{
console.log("Inside of hideOrShow function - Window width is less than 500px, hiding hamburger");
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
}
}
function openSlideMenu(){
console.log("hamburger btn clicked");
slidingMenu.setAttribute("visibility","visible");
slidingMenu.setAttribute("background-color","red");
}
function closeSlideMenu(){
console.log("close btn clicked");
slidingMenu.setAttribute("visibility","hidden");
}
私はイベントが起動された後、visibility属性が変更されたクロームデバッガで見たが、私はまだブラウザで視覚的な変更が表示されません。たとえば、閉じるボタンをクリックすると、ハンバーガーアイコンの下にある垂直ナビゲーションバーが表示されます。 私は任意のヒントをありがとうと思います。
"属性"は要素の属性 - 属性です。 "プロパティ"は、CSSのスタイルスタイルのプロパティです。 –
ありがとう、私は知らなかった。私はなぜここにいる人々が-1を与えるのではないのですか？だから、誰が新しい質問をしなければならないのですか？ – user1836957
@ user1836957おそらくあなたは質問をする前に小さな研究をする必要があるので、あなたは確かにanwserを取得します。 –