如何隐藏HTML中的toggle元素

时间：2018-06-27 09:32:43

标签： html css 

body .ramji_wrapper {
  width: 225px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #2a394f;
}
body .ramji_wrapper label {
  padding: 25px;
  float: left;
  height: 72px;
  border-bottom: 1px solid #293649;
  position: relative;
  width: 100%;
  color: #eff4fa;
  
  -webkit-transition: text-indent .15s, height .3s;
  transition: text-indent .15s, height .3s;
  box-sizing: border-box;
}
body .ramji_wrapper label img {
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}
body .ramji_wrapper label span {
  position: relative;
  top: -3px;
}
body .ramji_wrapper label:hover {
  background: #212e41;
  border-bottom: 1px solid #2A394F;
  text-indent: 4px;
}
body .ramji_wrapper label:hover .bar {
  width: 100%;
}
body .ramji_wrapper label .bar {
  width: 0px;
  -webkit-transition: width .15s;
  transition: width .15s;
  height: 2px;
  position: absolute;
  display: block;
  background: #355789;
  bottom: 0;
  left: 0;
}
body .ramji_wrapper label .lil_arrow {
  width: 5px;
  height: 5px;
  -webkit-transition: transform 0.8s;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  float: right;
  position: relative;
  top: 6px;
  right: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body .ramji_wrapper__content {
  position: absolute;
  display: none;
  overflow: hidden;
  left: 0;
  width: 100%;
}
body .ramji_wrapper__content li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #15a4fa;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s,text-indent .3s;
  transition: box-shadow .3s,text-indent .3s;
  position: relative;
}
body .ramji_wrapper__content li:hover {
  background: #0c93e4;
  box-shadow: 3px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s linear,text-indent .3s linear;
  transition: box-shadow .3s linear,text-indent .3s linear;
  text-indent: 31px;
}
body .ramji_wrapper__content .clear {
  clear: both;
}

input[type='radio']:checked + label .ramji_wrapper__content {
  display: block;
  top: 68px;
  border-bottom: 1px solid #212e41;
}

input[type="radio"]:checked + label > .lil_arrow {
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #14a3f9;
  border-right: 2px solid #14a3f9;
}

input[type='radio']:checked + label {
  height: 325px;
  background: #212e41;
  text-indent: 4px;
  -webkit-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type='radio']:checked + label .bar {
  width: 0;
}

input[type='radio']:checked + label li:nth-of-type(1) {
  -webkit-animation: in 0.15s 0.575s forwards;
          animation: in 0.15s 0.575s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.575s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2) {
  -webkit-animation: in 0.15s 0.7s forwards;
          animation: in 0.15s 0.7s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.7s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
  -webkit-animation: in 0.15s 0.825s forwards;
          animation: in 0.15s 0.825s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.825s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(4) {
  -webkit-animation: in 0.15s 0.95s forwards;
          animation: in 0.15s 0.95s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.95s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@-webkit-keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
  <div class='ramji_wrapper'>
    <input id='Dashboard' name='radio' type='radio'>
    <label for='Dashboard'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png'>
      <span>Dashboard</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>Tools</li>
          <li>Reports</li>
          <li>Analytics</li>
          <li>Code Blocks</li>
        </ul>
      </div>
    </label>
    <input id='Sales' name='radio' type='radio'>
    <label for='Sales'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png'>
      <span>Sales</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>New Sales</li>
          <li>Expired Sales</li>
          <li>Sales Reports</li>
          <li>Deliveries</li>
        </ul>
      </div>
    </label>
    <input id='Messages' name='radio' type='radio'>
    <label for='Messages'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png'>
      <span>Messages</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>Inbox</li>
          <li>Outbox</li>
          <li>Sent</li>
          <li>Archived</li>
        </ul>
      </div>
    </label>
    <input id='Users' name='radio' type='radio'>
    <label for='Users'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png'>
      <span>Users</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>New User</li>
          <li>User Groups</li>
          <li>Permissions</li>
          <li>Passwords</li>
        </ul>
      </div>
    </label>
    <input id='Settings' radio='radio' type='radio'>
    <label for='Settings'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png'>
      <span>Settings</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>Databases</li>
          <li>Design</li>
          <li>Change User</li>
          <li>Log Out</li>
        </ul>
      </div>
    </label>
  </div>

> the  code is showing the contents after i click the little arrow. but again if i click the little arrow it is not closing(hiding). please tell me the changes that I have to do

  

单击小箭头后，代码将显示内容。但是再次，如果我单击小箭头，它没有关闭（隐藏）。请告诉我必须要做的更改

1 个答案:

答案 0 :(得分：1)

您需要使用checkbox而不是radio。一旦选中radio，就无法通过再次单击来取消选中它。只能选择另一个。但这不会是复选框的问题。唯一的缺点是所有功能都可以一次打开：

body .ramji_wrapper {
  width: 225px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #2a394f;
}
body .ramji_wrapper label {
  padding: 25px;
  float: left;
  height: 72px;
  border-bottom: 1px solid #293649;
  position: relative;
  width: 100%;
  color: #eff4fa;
  
  -webkit-transition: text-indent .15s, height .3s;
  transition: text-indent .15s, height .3s;
  box-sizing: border-box;
}
body .ramji_wrapper label img {
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}
body .ramji_wrapper label span {
  position: relative;
  top: -3px;
}
body .ramji_wrapper label:hover {
  background: #212e41;
  border-bottom: 1px solid #2A394F;
  text-indent: 4px;
}
body .ramji_wrapper label:hover .bar {
  width: 100%;
}
body .ramji_wrapper label .bar {
  width: 0px;
  -webkit-transition: width .15s;
  transition: width .15s;
  height: 2px;
  position: absolute;
  display: block;
  background: #355789;
  bottom: 0;
  left: 0;
}
body .ramji_wrapper label .lil_arrow {
  width: 5px;
  height: 5px;
  -webkit-transition: transform 0.8s;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  float: right;
  position: relative;
  top: 6px;
  right: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body .ramji_wrapper__content {
  position: absolute;
  display: none;
  overflow: hidden;
  left: 0;
  width: 100%;
}
body .ramji_wrapper__content li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #15a4fa;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s,text-indent .3s;
  transition: box-shadow .3s,text-indent .3s;
  position: relative;
}
body .ramji_wrapper__content li:hover {
  background: #0c93e4;
  box-shadow: 3px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s linear,text-indent .3s linear;
  transition: box-shadow .3s linear,text-indent .3s linear;
  text-indent: 31px;
}
body .ramji_wrapper__content .clear {
  clear: both;
}

input[type='checkbox'] {
display: none;
}

input[type='checkbox']:checked + label .ramji_wrapper__content {
  display: block;
  top: 68px;
  border-bottom: 1px solid #212e41;
}

input[type="checkbox"]:checked + label > .lil_arrow {
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #14a3f9;
  border-right: 2px solid #14a3f9;
}

input[type='checkbox']:checked + label {
  height: 325px;
  background: #212e41;
  text-indent: 4px;
  -webkit-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type='checkbox']:checked + label .bar {
  width: 0;
}

input[type='checkbox']:checked + label li:nth-of-type(1) {
  -webkit-animation: in 0.15s 0.575s forwards;
          animation: in 0.15s 0.575s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.575s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label li:nth-of-type(2) {
  -webkit-animation: in 0.15s 0.7s forwards;
          animation: in 0.15s 0.7s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.7s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label li:nth-of-type(3) {
  -webkit-animation: in 0.15s 0.825s forwards;
          animation: in 0.15s 0.825s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.825s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='checkbox']:checked + label li:nth-of-type(4) {
  -webkit-animation: in 0.15s 0.95s forwards;
          animation: in 0.15s 0.95s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.95s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@-webkit-keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
<div class='ramji_wrapper'>
    <input id='Dashboard' name='radio' type='checkbox'>
    <label for='Dashboard'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dash.png'>
      <span>Dashboard</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>Tools</li>
          <li>Reports</li>
          <li>Analytics</li>
          <li>Code Blocks</li>
        </ul>
      </div>
    </label>
    <input id='Sales' name='radio' type='checkbox'>
    <label for='Sales'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/del.png'>
      <span>Sales</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>New Sales</li>
          <li>Expired Sales</li>
          <li>Sales Reports</li>
          <li>Deliveries</li>
        </ul>
      </div>
    </label>
    <input id='Messages' name='radio' type='checkbox'>
    <label for='Messages'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mess.png'>
      <span>Messages</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>Inbox</li>
          <li>Outbox</li>
          <li>Sent</li>
          <li>Archived</li>
        </ul>
      </div>
    </label>
    <input id='Users' name='radio' type='checkbox'>
    <label for='Users'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/users.png'>
      <span>Users</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>New User</li>
          <li>User Groups</li>
          <li>Permissions</li>
          <li>Passwords</li>
        </ul>
      </div>
    </label>
    <input id='Settings' radio='radio' type='checkbox'>
    <label for='Settings'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/set.png'>
      <span>Settings</span>
      <div class='lil_arrow'></div>
      <div class='bar'></div>
      <div class='ramji_wrapper__content'>
        <ul>
          <li>Databases</li>
          <li>Design</li>
          <li>Change User</li>
          <li>Log Out</li>
        </ul>
      </div>
    </label>
  </div>

相关问题
最新问题