Q&A
どのようなコードを書いたのか記述してください
現在、Bootstrap 4でウェブサイトを制作している初心者です。
この度Side Navigation(sidebar) メニューに、Accordionを追加したいのですが、うまく動作しません。
参考サイト：
https://www.w3schools.com/howto/howto_js_sidenav.asp
https://www.w3schools.com/howto/howto_js_accordion.asp
結果：
コード：
[html]
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<button class="accordion">About</button>
<div class="panel"><a href="#">Organization</a></div>
<div class="panel"><a href="#">Artists</a></div>
<button class="accordion">Events</button>
<div class="panel"><a href="#">Upcoming</a></div>
<div class="panel"><a href="#">Past</a></div>
<button class="accordion">Classes</button>
<div class="panel"><a href="#">Class</a></div>
<a href="#">Contact</a>
[css]
/* The side navigation menu /
.sidenav {
height: 100%; / 100% Full-height /
width: 0; / 0 width - change this with JavaScript /
position: fixed; / Stay in place /
z-index: 1; / Stay on top /
top: 0; / Stay at the top /
right: 0;
background-color: #FFF6F0; / Light orange*/
overflow-x: hidden; /* Disable horizontal scroll /
padding-top: 60px; / Place content 60px from the top /
transition: 0.5s; / 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 21px;
color: #707070;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #FF6600;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.accordion {
color: #55555;
background-color: none;
cursor: pointer;
padding: 0px;
width: 100%;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
color: #FF6600;
}
.accordion:after {
content: '\002B';
color: #FF6600;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0px;
background-color: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
[javascript]
個々に分けて、bodyの最後に入れました。
[menu]
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
// JavaScript Document
[accordion]
// JavaScript Document
var acc = document.getElementsByClassName("accordionmenu");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Bootstrap のCSSかJavascriptが重複しているのでしょうか？
その場合、どのように設計するのがよいか教えていただけると幸いです。
よろしくお願いいたします。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、「うまく動作しません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
HTMLにaccordionmenuがないし、「bodyの最後に」は<script>は入っていないってないですよね？
再現するコードをお願いします
x_x さん、kei344さん
ご返信ありがとうございます。
Javascriptのaccordionmenuをaccordionに変更したところ、やっと作動しました。。
投稿する前にIDを変えるなどして試行錯誤していたまま、戻し忘れていました。
これまでなぜ作動しなかったのかは不明なのですが…。
ご指摘ありがとうございました。次回投稿する際はコードの記述や問題点など記述します。
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
あなたの回答
tips
プレビュー
