Javascript to close menu accordion

Asked

Viewed 327 times

2

I have the following code:

* {
  margin:0;
  padding: 0;
  border: 0;
  font-family: sans-serif;
  font-size:14px;
  list-style: none;
  text-decoration: none;
}

.nav a, .nav label {
  display: block;
  padding: 10px;
  color:#000;
  background-color: #e0e0e0;
  box-shadow: inset 0 -1px #ddd;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: #444;
  background: #d0d0d0;
}

.nav label {
  cursor: pointer;
}

.group-list a, .group-list label {
  padding-left: 1rem;
  background: #f0f5f5;
  box-shadow: inset 0 -1px #ddd;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover {
  color: #444;
  background: #d5dada;
}

.sub-group-list a, .sub-group-list label {
  padding-left: 2rem;
  background: #fff;
  box-shadow: inset 0 -1px #ddd;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover {
  color:#444;
  background: #fff;
  text-decoration:underline;
}

.group-list, .sub-group-list, .sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul {
  max-height: 100%;
}

.space{
  padding-bottom: 4px;
}
<table style="width: 20%">
  <tr>
    <td>
      <nav class="nav" role="navigation">
        <ul class="nav__list">
          <li><!--INICIO-->
            <input id="sub-group-1" type="checkbox" hidden />
            <label for="sub-group-1">MENU 1</label>
            <ul class="sub-group-list">
              <li><a href="#">link 1</a></li>
              <li><a href="#">link 2</a></li>
            </ul>
          </li><!--FIM-->
          <li><div class="space"></div></li>
          <li><!--INICIO-->
            <input id="group-1" type="checkbox" hidden />
            <label for="group-1">MENU 2</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-2" type="checkbox" hidden />
                <label for="sub-group-2">Sub menu A</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 3</a></li>
                  <li><a href="#">link 4</a></li>
                </ul>
                <!---->
                <input id="sub-group-3" type="checkbox" hidden />
                <label for="sub-group-3">Sub menu B</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 5</a></li>
                  <li><a href="#">link 6</a></li>
                </ul>
              </li>
            </ul>
          </li><!--FIM-->
          <li><div class="space"></div></li>
          <li><!--INICIO-->
            <input id="group-2" type="checkbox" hidden />
            <label for="group-2">MENU 3</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-11" type="checkbox" hidden />
                <label for="sub-group-11">Sub menu C</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 7</a></li>
                  <li><a href="#">link 8</a></li>
                </ul>
                <!---->
                <input id="sub-group-12" type="checkbox" hidden />
                <label for="sub-group-12">Sub menu D</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 9</a></li>
                  <li><a href="#">link 10</a></li>
                </ul>
              </li>
            </ul>
          </li><!--FIM-->
        </ul>
      </nav>
    </td>
  </tr>
</table>

http://codepen.io/andrei_antony/pen/zoMLKx

I wonder how I can develop a Javascript to close any MENU when another MENU or submenu is clicked

Example:

Close MENU 1 or MENU 2 when MENU 3 or its submenus is clicked.

Close MENU 1 or MENU 3 when MENU 2 or its submenus is clicked.

Close MENU 2 or MENU 3 when MENU 1 is clicked

php html css

  • Would that help you? http://codepen.io/lennon/pen/LbMRRe

  • I have tried this way, but the menu is 3 levels, for example: I have the MENU 2 and inside the MENU 2 I have the submenu A and inside the submenu A I have the links that will open a PDF Already the MENU 1 does not submenus you. When you click on it, it goes straight to the links

  • and now http://codepen.io/lennon/pen/LbMRRe

1 answer

2

I don’t know how to do this only with CSS:

I only removed the classes that open the CSS MENU and Transitions.

I created a JS function.

$('.showMenu').on('click', function(event) {
  event.preventDefault();
  var submenu = $(this).find('ul');

  if(submenu.css('max-height') == '100%'){
    submenu.css('max-height', '0');
  }
  else{
    $('.nav__list > li > ul').css('max-height', '0');
    submenu.css('max-height', '100%');
  }
  
});
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: sans-serif;
  font-size: 14px;
  list-style: none;
  text-decoration: none;
}
.nav a,
.nav label {
  display: block;
  padding: 10px;
  color: #000;
  background-color: #e0e0e0;
  box-shadow: inset 0 -1px #ddd;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.nav a:focus,
.nav a:hover,
.nav label:focus,
.nav label:hover {
  color: #444;
  background: #d0d0d0;
}
.nav label {
  cursor: pointer;
}
.group-list a,
.group-list label {
  padding-left: 1rem;
  background: #f0f5f5;
  box-shadow: inset 0 -1px #ddd;
}
.group-list a:focus,
.group-list a:hover,
.group-list label:focus,
.group-list label:hover {
  color: #444;
  background: #d5dada;
}
.sub-group-list a,
.sub-group-list label {
  padding-left: 2rem;
  background: #fff;
  box-shadow: inset 0 -1px #ddd;
}
.sub-group-list a:focus,
.sub-group-list a:hover,
.sub-group-list label:focus,
.sub-group-list label:hover {
  color: #444;
  background: #fff;
  text-decoration: underline;
}
.group-list,
.sub-group-list,
.sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
}
.space {
  padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width: 20%">
  <tr>
    <td>
      <nav class="nav" role="navigation">
        <ul class="nav__list">
          <li class="showMenu">
            <!--INICIO-->
            <input id="sub-group-1" type="checkbox" hidden />
            <label for="sub-group-1">MENU 1</label>
            <ul class="sub-group-list">
              <li><a href="#">link 1</a>
              </li>

              <li><a href="#">link 2</a>
              </li>
            </ul>
          </li>
          <!--FIM-->
          <li>
            <div class="space"></div>
          </li>
          <li class="showMenu">
            <!--INICIO-->
            <input id="group-1" type="checkbox" hidden />
            <label for="group-1">MENU 2</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-2" type="checkbox" hidden />
                <label for="sub-group-2">Sub menu A</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 3</a>
                  </li>
                  <li><a href="#">link 4</a>
                  </li>
                </ul>
                <!---->
                <input id="sub-group-3" type="checkbox" hidden />
                <label for="sub-group-3">Sub menu B</label>
                <ul class="sub-group-list">

                  <li><a href="#">link 5</a>
                  </li>

                  <li><a href="#">link 6</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <!--FIM-->
          <li>
            <div class="space"></div>
          </li>
          <li class="showMenu">
            <!--INICIO-->
            <input id="group-2" type="checkbox" hidden />
            <label for="group-2">MENU 3</label>
            <ul class="group-list">
              <li>
                <input id="sub-group-11" type="checkbox" hidden />
                <label for="sub-group-11">Sub menu C</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 7</a>
                  </li>
                  <li><a href="#">link 8</a>
                  </li>
                </ul>
                <!---->
                <input id="sub-group-12" type="checkbox" hidden />
                <label for="sub-group-12">Sub menu D</label>
                <ul class="sub-group-list">
                  <li><a href="#">link 9</a>
                  </li>
                  <li><a href="#">link 10</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <!--FIM-->
        </ul>
      </nav>
    </td>
  </tr>
</table>

  • That way, Gumball, he opens all the submenus of MENU 2 and 3. When he wanted him to open up to submenu A and B and then click on them open the links

  • I already solved it! I switched checkbox by radio in the input tags and modified the css. So when I click on one item it closes the other automatically, even though it has several sub menus open

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.