1. 首页
  2. 问答
  3. html javascript collapse手风琴

html javascript collapse手风琴

2017-05-25 59 views
0

我在侧面导航窗口内部有一个手风琴。如果我打开所有面板，如果关闭侧面导航面板，它们会保持打开状态。当我的侧面导航关闭时，我希望手风琴折叠。 我的代码已附加。html javascript collapse手风琴

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
body { 
 
    font-family: "Lato", sans-serif; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
} 
 
button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
</div> 
 
</div> 
 

 
<div id="main"> 
 
    
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 
</div> 
 

 
<script> 
 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("main").style.marginLeft= "0"; 
 
} 
 

 
var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight){ 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
} 
 
</script> 
 
     
 
</body> 
 
</html>

来源

2017-05-25 Josh Carew

+0

任何人可以帮助？ –

回答

0

您可以创建通过面板打开/关闭面板，并在closeNav()只是循环的功能和全部关闭。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    body { 
 
     font-family: "Lato", sans-serif; 
 
    } 
 
    
 
    .sidenav { 
 
     height: 100%; 
 
     width: 0; 
 
     position: fixed; 
 
     z-index: 1; 
 
     top: 0; 
 
     left: 0; 
 
     background-color: #111; 
 
     overflow-x: hidden; 
 
     transition: 0.5s; 
 
     padding-top: 60px; 
 
    } 
 
    
 
    .sidenav a { 
 
     padding: 8px 8px 8px 32px; 
 
     text-decoration: none; 
 
     font-size: 25px; 
 
     color: #818181; 
 
     display: block; 
 
     transition: 0.3s; 
 
    } 
 
    
 
    .sidenav a:hover, 
 
    .offcanvas a:focus { 
 
     color: #f1f1f1; 
 
    } 
 
    
 
    .sidenav .closebtn { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 25px; 
 
     font-size: 36px; 
 
     margin-left: 50px; 
 
    } 
 
    
 
    #main { 
 
     transition: margin-left .5s; 
 
     padding: 16px; 
 
    } 
 
    
 
    @media screen and (max-height: 450px) { 
 
     .sidenav { 
 
     padding-top: 15px; 
 
     } 
 
     .sidenav a { 
 
     font-size: 18px; 
 
     } 
 
    } 
 
    
 
    button.accordion { 
 
     background-color: #eee; 
 
     color: #444; 
 
     cursor: pointer; 
 
     padding: 18px; 
 
     width: 100%; 
 
     border: none; 
 
     text-align: left; 
 
     outline: none; 
 
     font-size: 15px; 
 
     transition: 0.4s; 
 
    } 
 
    
 
    button.accordion.active, 
 
    button.accordion:hover { 
 
     background-color: #ddd; 
 
    } 
 
    
 
    button.accordion:after { 
 
     content: '\002B'; 
 
     color: #777; 
 
     font-weight: bold; 
 
     float: right; 
 
     margin-left: 5px; 
 
    } 
 
    
 
    button.accordion.active:after { 
 
     content: "\2212"; 
 
    } 
 
    
 
    div.panel { 
 
     padding: 0 18px; 
 
     background-color: white; 
 
     max-height: 0; 
 
     overflow: hidden; 
 
     transition: max-height 0.2s ease-out; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
    <button class="accordion">Section 1</button> 
 
    <div class="panel"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 

 
    <button class="accordion">Section 2</button> 
 
    <div class="panel"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 

 
    <button class="accordion">Section 3</button> 
 
    <div class="panel"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="main"> 
 

 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 
    </div> 
 

 
    <script> 
 
    
 
    var acc = document.getElementsByClassName("accordion"); 
 
    var i; 
 
    
 
    function openNav() { 
 
     document.getElementById("mySidenav").style.width = "250px"; 
 
     document.getElementById("main").style.marginLeft = "250px"; 
 
    } 
 
    
 
    function closeNav() { 
 
     document.getElementById("mySidenav").style.width = "0"; 
 
     document.getElementById("main").style.marginLeft = "0"; 
 
     for (i = 0; i < acc.length; i++) { 
 
     closePanel(acc[i]); 
 
     } 
 
    } 
 
    
 
    function openPanel(el) { 
 
     el.classList.add("active"); 
 
     el.nextElementSibling.style.maxHeight = el.nextElementSibling.scrollHeight + "px"; 
 
    } 
 
    
 
    function closePanel(el) { 
 
     el.classList.remove("active"); 
 
     el.nextElementSibling.style.maxHeight = null; 
 
    } 
 
    
 
    for (i = 0; i < acc.length; i++) { 
 
     acc[i].onclick = function() { 
 
     if (this.classList.contains("active")) { 
 
      closePanel(this); 
 
     } else { 
 
      openPanel(this); 
 
     } 
 
     }; 
 
    } 
 
    </script> 
 

 
</body> 
 

 
</html>

来源

2017-05-25 23:53:52

相关问题

 相关问题