HTML切换显示和隐藏

我开发了一个带有侧栏标题的HTML文档，我想单击标题，它必须显示和隐藏标题下的组件。HTML切换显示和隐藏

问题是，它只适用于我的“登录”标题。对于我的“什么是出席”标题，它不显示和隐藏它下面的组件，它隐藏了“登录”组件。所以根据我的说法，“什么是出勤”标题不起作用。

我还想在每次打开文档时隐藏组件。

另一个问题。每次显示标题下方的组件时，如何使箭头旋转？

这是我到目前为止有：

HTML

<script> 
function myFunction() { 
    var x = document.getElementById('myDIV'); 
    if (x.style.display === 'none') { 
     x.style.display = 'block'; 
    } else { 
     x.style.display = 'none'; 
    } 
} 
</script> 

<body style=background-image:url('Images/blue.jpg')> 

<section id="body" class="width" > 


      <aside id="sidebar" class="column-left"> 
      <img class="thumbnail" src="Images/VsoftLogo.jpg" alt="thumbnail" /> 

      <h2 onclick="myFunction()" class ="sidebar-heading"><i class="down" style-"top:-50px"></i> LOGINS</h2> 
      <div id="myDIV"> 
       <nav id="mainnav"> 
       <ul> 
            <li><a href="#">Home</a></li> 
            <li><a href="#">Products</a></li> 
            <li><a href="#">Solutions</a></li> 
            <li><a href="#">Contact1</a></li> 
            <li><a href="#">Contact1</a></li> 
            <li><a href="#">Contact1</a></li> 

          </ul> 
      </nav> 


      </div> 


      <h4 onclick="myFunction()" class ="sidebar-heading"><i class="down" style-"top:-50px"></i> what is attendance</h4> 
      <div id="myDIV"> 
       <nav id="mainnav"> 
       <ul> 
            <li><a href="#">Example</a></li> 
            <li><a href="#">Example2</a></li> 
            <li><a href="#">Example3</a></li> 
            <li><a href="#">Example4</a></li> 
            <li><a href="#">Example</a></li> 
            <li><a href="#">Contact1</a></li> 
          <hr>         
          </ul> 
      </nav> 
      </div>

CSS

.mystyle { 
    width: 100%; 
    padding: 25px; 
    background-color: coral; 
    color: white; 
    font-size: 25px; 
} 
i { 
    border: solid #ffb200; 
    border-width: 0 5px 5px 0; 
    display: inline-block; 
    padding: 5px; 

} 
.down { 
    color:#ffb200; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
}

来源

2017-03-01 Lyubomir Valchev

在这里，你已经使用了id多个集装箱。任何时候DOM中的一个id应该是唯一的。

此外，还有与style标签的HTML语法错误。

可以代替这里定义的ID，用什么event财产，并相应地操纵它在默认情况下在页面加载隐藏。

您可以指定mainnav类的显示/隐藏容器，使他们^ h

检查fiddle。

参考代码：

function myFunction(event) { 
 
    var x = event.target.nextElementSibling, 
 
    y = event.target.firstChild; 
 
    if (x.style.display === 'none' || x.style.display === '') { 
 
    x.style.display = 'block'; 
 
    y.classList.add("down"); 
 
    y.classList.remove("right"); 
 
    } else { 
 
    x.style.display = 'none'; 
 
    y.classList.remove("down"); 
 
    y.classList.add("right"); 
 
    } 
 
}

.sidebar-heading { 
 
    cursor: pointer; 
 
} 
 

 
.mystyle { 
 
    width: 100%; 
 
    padding: 25px; 
 
    background-color: coral; 
 
    color: white; 
 
    font-size: 25px; 
 
} 
 

 
i { 
 
    border: solid #ffb200; 
 
    border-width: 0 5px 5px 0; 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 

 
.down { 
 
    color: #ffb200; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    -ms-transform: rotate(45deg); 
 
} 
 

 
.right { 
 
    color: #ffb200; 
 
    transform: rotate(-45deg); 
 
    -webkit-transform: rotate(-45deg); 
 
    -ms-transform: rotate(-45deg); 
 
} 
 

 
.mainnav { 
 
    display: none; 
 
}

<body> 
 
    <section id="body" class="width"> 
 
    <aside id="sidebar" class="column-left"> 
 
     <h2 onclick="myFunction(event);" class="sidebar-heading"><i class="right" style="top:-50px"></i> LOGINS</h2> 
 
     <div class="mainnav"> 
 
     <nav> 
 
      <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Products</a></li> 
 
      <li><a href="#">Solutions</a></li> 
 
      <li><a href="#">Contact1</a></li> 
 
      <li><a href="#">Contact1</a></li> 
 
      <li><a href="#">Contact1</a></li> 
 
      </ul> 
 
     </nav> 
 
     </div> 
 

 

 
     <h4 onclick="myFunction(event);" class="sidebar-heading"><i class="right" style="top:-50px"></i> what is attendance</h4> 
 
     <div class="mainnav"> 
 
     <nav> 
 
      <ul> 
 
      <li><a href="#">Example</a></li> 
 
      <li><a href="#">Example2</a></li> 
 
      <li><a href="#">Example3</a></li> 
 
      <li><a href="#">Example4</a></li> 
 
      <li><a href="#">Example</a></li> 
 
      <li><a href="#">Contact1</a></li> 
 
      <hr> 
 
      </ul> 
 
     </nav> 
 
     </div>

来源

2017-03-01 08:45:44 nashcheez

谢谢您的回答。这帮助了我。如何在每次打开文档时隐藏标题下方的组件？ –

HTML切换显示和隐藏

回答

相关问题