Problem with treeview menu

Asked

Viewed 299 times

0

Good morning I’m making a menu and I need the functionality of a treeview, but even done as documentation when clicking on the menu the desired links are not displayed(dropdown):

Code: 

<ul class="sidebar-menu">
        <li class="header">MENU</li>
        <!-- Optionally, you can add icons to the links 
        <li><a href="http://localhost/sistema/inicio"><i class="fa fa-line-chart"></i> <span>Inicio</span></a></li>-->
        <li><a href="http://localhost/sistema/clientes"><i class="fa fa-users"></i> <span>Clientes</span></a></li>
        <li><a href="http://localhost/sistema/orcamentos"><i class="fa fa-folder-open"></i> <span>Orcamentos</span></a></li>
        <li><a href="http://localhost/sistema/comments"><i class="fa fa-comments-o"></i> <span>Historico</span></a></li>
        <li><a href="http://localhost/sistema/produtos"><i class="fa fa-barcode"></i> <span>Produtos</span></a></li>
        <li><a href="http://localhost/sistema/representantes"><i class="fa fa-handshake-o"></i> <span>Representantes</span></a></li>
        <li><a href="http://localhost/sistema/calendar2"><i class="fa fa-calendar-o"></i> <span>Agenda</span></a>
        </li>

        <li class="treeview">
          <a href="#"><i class="fa fa-male"></i> <span>Equipe</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li><a href="http://localhost/sistema/equipe">Usuarios</a></li>
            <li><a href="#">Log</a></li>
          </ul>
        </li>

        <li><a href="http://localhost/sistema/login/logout" onclick="return confirm('Deseja sair?')">
        <i class="fa fa-sign-out"></i> <span>Sair</span></a>
      </ul>

But note that if I add the following parameter to my code the menus inside treeview are displayed in a static way (without the user clicking on the main menu):

<li class="treeview active">

inserir a descrição da imagem aqui

and complementing this are the following files that I am loading at the beginning of my file:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">


  <!-- REQUIRED JS SCRIPTS -->

  <!-- jQuery 3.1.1 -->
  <script src="<?php echo base_url("assets/plugins/jQuery/jquery-2.2.3.min.js"); ?>"></script>

  <!-- Bootstrap 3.3.6 -->
  <script src="<?php echo base_url("assets/bootstrap/js/bootstrap.min.js"); ?>"></script>

  <!-- jQuery UI 1.11.4 -->
  <link rel="stylesheet" href= "<?php echo base_url(); ?>assets/plugins/jQueryUI/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>



  <title>Superar CRM</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.6 -->
  <link rel="stylesheet" href= "<?php echo base_url(); ?>assets/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
  <!-- fullCalendar 2.2.5-->
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/fullcalendar/fullcalendar.min.css">
  <link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/fullcalendar/fullcalendar.print.css" media="print">
javascript codeigniter web-application bootstrap treeview

1 answer

0

Hello,

I don’t know if the code I wrote will work, but at least I can give you an idea of what you need:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<script>
$('li.header').click( function (){
  if($('li.treeview').hasClass("active")){
    $('li.treeview').removeClass("active")
  }
  else{
    $('li.treeview').addClass("active")
  }
})
</script>

I hope I’ve helped.

Browser other questions tagged javascript codeigniter web-application bootstrap treeview

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