Close submenus by clicking another

Asked

Viewed 63 times

-2

I have the following menu and would like that when a submenu is opened, any other submenu previously opened would automatically close to not "pollute" the sidebar, keeping only one submenu open at a time. Does anyone have any idea what I can implement to solve this ?

 <nav class="sidebar">
    <div class="text">Side Menu</div>

    <ul>
        <li><a href="#">Página inicial</a></li>
        <li><a href="#" class="tay-btn">Série de Taylor<span class="fas fa-caret-down first"></span></a>
            <ul class="tay-show">

            <li><a href="#">Aproximação e Erro</a></li>

            </ul>
        </li>
        <li>
            <a href="#"class="rai-btn">Raízes <span class="fas fa-caret-down second"></span></a>
            <ul class="rai-show">
                <li><a href="#">Bissecção</a></li>
                <li><a href="#">Falsa posição</a></li>
                <li><a href="#">Newton-Raphson</a></li>
                <li><a href="#">Secante</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="sis-btn">Sistemas lineares<span class="fas fa-caret-down third"></span></a>
            <ul class="sis-show">
                <li><a href="#">Sistemas triangulares</a></li>
                <li><a href="#">Método de Gauss</a></li>
                <li><a href="#">Decomposição LU</a></li>
                <li><a href="#">Jacobi</a></li>
                <li><a href="#">Gauss-Seidel</a></li>
            </ul>

        </li>
        <li>
            <a href="#" class="mmq-btn">MMQ<span class="fas fa-caret-down fourth"></span></a>
            <ul class="mmq-show">
                <li><a href="#">Regressão linear</a></li>
                <li><a href="#">Regressão polinomial</a></li>
                <li><a href="#">Caso Geral</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="inter-btn">Interpolação<span class="fas fa-caret-down fifth"></span></a>
            <ul class="inter-show">
                <li><a href="#">Lagrange</a></li>
                <li><a href="#">Newton</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="integ-btn">Integração<span class="fas fa-caret-down sixth"></span></a>
            <ul class="integ-show">
                <li><a href="#">Regra do trapézio</a></li>
                <li><a href="#">Simpson 1/3</a></li>
                <li><a href="#">Simpson 3/8</a></li>
            </ul>

        </li>
        <li>
            <a href="#" class="edo-btn">EDOs<span class="fas fa-caret-down seventh"></span></a>
            <ul class="edo-show">
                <li><a href="#">Método de Euler</a></li>
                <li><a href="#">Método de Geun</a></li>
                <li><a href="#">Método do Ponto Médio</a></li>
                <li><a href="#">Métodos de Runge-Kutta</a></li>
            </ul>
        </li>

    </ul>

</nav>

and the jquery script is like this: 

 <script>
    $('.tay-btn').click(function(){
        $('nav ul .tay-show').toggleClass("show");
        $('nav ul .first').toggleClass("rotate");
      });
    $('.rai-btn').click(function(){
        $('nav ul .rai-show').toggleClass("show1");
        $('nav ul .second').toggleClass("rotate");
      });
      $('.sis-btn').click(function(){
        $('nav ul .sis-show').toggleClass("show2");
        $('nav ul .third').toggleClass("rotate");
      });
      $('.mmq-btn').click(function(){
        $('nav ul .mmq-show').toggleClass("show3");
        $('nav ul .fourth').toggleClass("rotate");
      });
      $('.inter-btn').click(function(){
        $('nav ul .inter-show').toggleClass("show4");
        $('nav ul .fifth').toggleClass("rotate");
      });
      $('.integ-btn').click(function(){
        $('nav ul .integ-show').toggleClass("show5");
        $('nav ul .sixth').toggleClass("rotate");
      });
      $('.edo-btn').click(function(){
        $('nav ul .edo-show').toggleClass("show6");
        $('nav ul .seventh').toggleClass("rotate");
      });


</script>

And the css:

*
{
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.sidebar
{
    position: fixed;
    width: 250px;
    height: 100%;
    height: 100%;
    left: 0;
    background: #1b1b1b;
}

.sidebar .text
{
    color: white;
    font-size: 25px;
    font-weight: 65px;
    text-align: center;
    background: #1e1e1e;
    letter-spacing: 1px;

}

nav ul
{
    background: #1b1b1b;
    height: 100%;
    width: 100%;
    list-style: none;
}

nav ul li
{
    line-height: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav ul li a
{
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding-left: 40px;
    font-weight: 500;
    display: block;
    width: 100%;
    border-left: 3px solid transparent;
}

nav ul li a:hover
{
    color: cyan;
    background: #1e1e1e;
    border-left-color: cyan;

}

nav ul ul
{
    position: static;
    display: none;

}

nav ul ul li
{
    position: static;
    line-height: 42px;
    border-bottom: none;

}

nav ul ul li a
{
   font-size: 14px;
    color: #e6e6e6;
    padding-left: 45px;
}

nav ul li a span
{
  position: absolute; 
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;

}

nav ul li a span.rotate
{
    transform: translateY(-50%) rotate(-180deg);
}

nav ul .tay-show.show
{
   display:block; 
}

nav ul .rai-show.show1
{
   display:block; 
}

nav ul .sis-show.show2
{
   display:block;  
}

nav ul .mmq-show.show3
{
   display:block;

}
nav ul .inter-show.show4
{
   display:block;   
}

nav ul .integ-show.show5
{
   display:block;   
}
nav ul .edo-show.show6
{
   display:block; 

}
html jquery css

  • Friend, edit your question. I can not understand exactly your doubt. Probably your post will be closed if it continues like this.

  • Okay. I hope that’s clear

  • Missing the CSS also.

  • the <Nav> ended up staying before the ```. Now it’s appearing. I added the css

2 answers

0

If what makes the menu open, it’s the class 'show' . Just remove the class from the open menus. I believe something like this would solve your problem:

  • I put id for reference in the menu:
<li><a href="#" class="tay-btn">Série de Taylor<span id="ico" class="fas fa-caret-down first"></span></a>
            <ul class="tay-show"  id="menu">

            <li><a href="#">Aproximação e Erro</a></li>

            </ul>
        </li>
        <li>
            <a href="#"class="rai-btn">Raízes <span id="ico1" class="fas fa-caret-down second"></span></a>
            <ul class="rai-show" id="menu1">
                <li><a href="#">Bissecção</a></li>
                <li><a href="#">Falsa posição</a></li>
                <li><a href="#">Newton-Raphson</a></li>
                <li><a href="#">Secante</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="sis-btn">Sistemas lineares<span id="ico2" class="fas fa-caret-down third"></span></a>
            <ul class="sis-show" id="menu2">
                <li><a href="#">Sistemas triangulares</a></li>
                <li><a href="#">Método de Gauss</a></li>
                <li><a href="#">Decomposição LU</a></li>
                <li><a href="#">Jacobi</a></li>
                <li><a href="#">Gauss-Seidel</a></li>
            </ul>

        </li>
        <li>
            <a href="#" class="mmq-btn">MMQ<span id="ico3" class="fas fa-caret-down fourth"></span></a>
            <ul class="mmq-show" id="menu3">
                <li><a href="#">Regressão linear</a></li>
                <li><a href="#">Regressão polinomial</a></li>
                <li><a href="#">Caso Geral</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="inter-btn">Interpolação<span id="ico4" class="fas fa-caret-down fifth"></span></a>
            <ul class="inter-show" id="menu4">
                <li><a href="#">Lagrange</a></li>
                <li><a href="#">Newton</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="integ-btn">Integração<span id="ico5" class="fas fa-caret-down sixth"></span></a>
            <ul class="integ-show" id="menu5">
                <li><a href="#">Regra do trapézio</a></li>
                <li><a href="#">Simpson 1/3</a></li>
                <li><a href="#">Simpson 3/8</a></li>
            </ul>

        </li>
        <li>
            <a href="#" class="edo-btn">EDOs<span id="ico6" class="fas fa-caret-down seventh"></span></a>
            <ul class="edo-show" id="menu6">
                <li><a href="#">Método de Euler</a></li>
                <li><a href="#">Método de Geun</a></li>
                <li><a href="#">Método do Ponto Médio</a></li>
                <li><a href="#">Métodos de Runge-Kutta</a></li>
            </ul>
        </li>

I made a function to close the menus before opening another:

 <script>
    function fechaMenus(){
      $('#menu').removeClass('show');
      $('#ico').removeClass('rotate');

      $('#menu1').removeClass('show1');
      $('#ico1').removeClass('rotate');

      $('#menu2').removeClass('show2');
      $('#ico2').removeClass('rotate');

      $('#menu3').removeClass('show3');
      $('#ico3').removeClass('rotate');

      $('#menu4').removeClass('show4');
      $('#ico4').removeClass('rotate');

      $('#menu5').removeClass('show5');
      $('#ico5').removeClass('rotate');

      $('#menu6').removeClass('show6');
      $('#ico6').removeClass('rotate');
    }

    $('.tay-btn').click(function(){
        this.fechaMenus();
        $('nav ul .tay-show').toggleClass("show");
        $('nav ul .first').toggleClass("rotate");
      });
    $('.rai-btn').click(function(){
        this.fechaMenus();
        $('nav ul .rai-show').toggleClass("show1");
        $('nav ul .second').toggleClass("rotate");
      });
      $('.sis-btn').click(function(){
        this.fechaMenus();
        $('nav ul .sis-show').toggleClass("show2");
        $('nav ul .third').toggleClass("rotate");
      });
      $('.mmq-btn').click(function(){
        this.fechaMenus();
        $('nav ul .mmq-show').toggleClass("show3");
        $('nav ul .fourth').toggleClass("rotate");
      });
      $('.inter-btn').click(function(){
        this.fechaMenus();
        $('nav ul .inter-show').toggleClass("show4");
        $('nav ul .fifth').toggleClass("rotate");
      });
      $('.integ-btn').click(function(){
        this.fechaMenus();
        $('nav ul .integ-show').toggleClass("show5");
        $('nav ul .sixth').toggleClass("rotate");
      });
      $('.edo-btn').click(function(){
        this.fechaMenus();
        $('nav ul .edo-show').toggleClass("show6");
        $('nav ul .seventh').toggleClass("rotate");
      });


</script>

This probably solves your problem. Any doubt leaves in the comments.

0


You could simplify the code by creating only one class for all toggle, without having to create a click event for each class, but to solve the problem in question, just add the code below, which removes the class .show of all <ul> inside .sidebar, except for the <ul> related to the menu item clicked:

$(".sidebar li a").click(function(){
   $(".fas", this) // seleciona o span.fas dentro do link clicado
   .toggleClass("rotate") // adiciona ou remove a classe
   .parent() // seleciona o pai do span, no caso o link <a>
   .next() // seleciona o elemento adjacente, no caso o <ul>
   .toggleClass("show"); // adiciona ou remova a classe

   $(".sidebar li a") // seleciona todos os <a>
   .not(this) // exceto ele próprio
   .next() // seleciona o elemento adjacente, no caso o <ul>
   .removeClass("show") // remove a classe
   .prev() // volta a selecionar o <a>
   .find(".fas") // seleciona o span.fas
   .removeClass("rotate"); // remove a classe
});

And use only one class .show (no need to repeat show1, show2 etc.):

nav.sidebar ul.show
{
   display:block; 
}

Sample:

$(".sidebar li a").click(function(){
   $(".fas", this)
   .toggleClass("rotate")
   .parent()
   .next()
   .toggleClass("show");

   $(".sidebar li a")
   .not(this)
   .next()
   .removeClass("show")
   .prev()
   .find(".fas")
   .removeClass("rotate");
});
*
{
    margin: 0;
    padding: 0;
    user-select: none;
    box-sizing: border-box;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.sidebar
{
    position: fixed;
    width: 250px;
    height: 100%;
    height: 100%;
    left: 0;
    background: #1b1b1b;
}

.sidebar .text
{
    color: white;
    font-size: 25px;
    font-weight: 65px;
    text-align: center;
    background: #1e1e1e;
    letter-spacing: 1px;

}

nav ul
{
    background: #1b1b1b;
    height: 100%;
    width: 100%;
    list-style: none;
}

nav ul li
{
    line-height: 60px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
nav ul li a
{
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding-left: 40px;
    font-weight: 500;
    display: block;
    width: 100%;
    border-left: 3px solid transparent;
}

nav ul li a:hover
{
    color: cyan;
    background: #1e1e1e;
    border-left-color: cyan;

}

nav ul ul
{
    position: static;
    display: none;

}

nav ul ul li
{
    position: static;
    line-height: 42px;
    border-bottom: none;

}

nav ul ul li a
{
   font-size: 14px;
    color: #e6e6e6;
    padding-left: 45px;
}

nav ul li a span
{
  position: absolute; 
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;

}

nav ul li a span.rotate
{
    transform: translateY(-50%) rotate(-180deg);
}

nav.sidebar ul.show
{
   display:block; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<nav class="sidebar">
<div class="text">Side Menu</div>
    <ul>
        <li><a href="#">Página inicial</a></li>
        <li><a href="#" class="tay-btn">Série de Taylor<span class="fas fa-caret-down first"></span></a>
            <ul class="tay-show">

            <li><a href="#">Aproximação e Erro</a></li>

            </ul>
        </li>
        <li>
            <a href="#"class="rai-btn">Raízes <span class="fas fa-caret-down second"></span></a>
            <ul class="rai-show">
                <li><a href="#">Bissecção</a></li>
                <li><a href="#">Falsa posição</a></li>
                <li><a href="#">Newton-Raphson</a></li>
                <li><a href="#">Secante</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="sis-btn">Sistemas lineares<span class="fas fa-caret-down third"></span></a>
            <ul class="sis-show">
                <li><a href="#">Sistemas triangulares</a></li>
                <li><a href="#">Método de Gauss</a></li>
                <li><a href="#">Decomposição LU</a></li>
                <li><a href="#">Jacobi</a></li>
                <li><a href="#">Gauss-Seidel</a></li>
            </ul>

        </li>
        <li>
            <a href="#" class="mmq-btn">MMQ<span class="fas fa-caret-down fourth"></span></a>
            <ul class="mmq-show">
                <li><a href="#">Regressão linear</a></li>
                <li><a href="#">Regressão polinomial</a></li>
                <li><a href="#">Caso Geral</a></li>
            </ul>
        </li>
        <li>
            <a href="#" class="inter-btn">Interpolação<span class="fas fa-caret-down fifth"></span></a>
            <ul class="inter-show">
                <li><a href="#">Lagrange</a></li>
                <li><a href="#">Newton</a></li>
            </ul>
        </li>

        <li>
            <a href="#" class="integ-btn">Integração<span class="fas fa-caret-down sixth"></span></a>
            <ul class="integ-show">
                <li><a href="#">Regra do trapézio</a></li>
                <li><a href="#">Simpson 1/3</a></li>
                <li><a href="#">Simpson 3/8</a></li>
            </ul>

        </li>
        <li>
            <a href="#" class="edo-btn">EDOs<span class="fas fa-caret-down seventh"></span></a>
            <ul class="edo-show">
                <li><a href="#">Método de Euler</a></li>
                <li><a href="#">Método de Geun</a></li>
                <li><a href="#">Método do Ponto Médio</a></li>
                <li><a href="#">Métodos de Runge-Kutta</a></li>
            </ul>
        </li>

    </ul>
</nav>

  • 1

    Thank you so much for the solutions. Both worked and helped me better understand how jquery works. I am beginner in the middle and it is often difficult to extract information from other codes/ doubts and be able to implement in the project itself.

  • I’m editing the answer to make it simpler.

  • Take a look now as it got simpler. No need for that lot of code and classes.

Browser other questions tagged html jquery css

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