Menu can't go directly to a page - php

Question

I have menu which is has sub menus.
<li>
<i class="fa fa-flag-checkered" aria-hidden="true"></i> <span>Lead</span> <i class="icon-submenu lnr lnr-chevron-left"></i>
<div id="lead" class="collapse ">
<ul class="nav">
<li><i class="fa fa-quote-right" aria-hidden="true"></i><span> Quotation </span><i class="icon-submenu lnr lnr-chevron-left"></i>
<div id="quotation" class="collapse ">
<ul class="nav">
<li><i class="fa fa-dot-circle-o" aria-hidden="true"></i> Create Quotation</li>
<li><i class="fa fa-dot-circle-o" aria-hidden="true"></i> Quotation Summary</li>
<li><i class="fa fa-dot-circle-o" aria-hidden="true"></i> Send Quotation</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
When I clicked it, I can not go directly to the page. I have to right-clicked on it to go to the desired page.
Here's an example of my controller
public function cquotation(){
$data = $this->salesModel->showCustomer();
$this->load->view('v_navbar');
$this->load->view('v_leftside');
$this->load->view('v_cquotation',array('data'=>$data));
}
Do you guys have any idea what's wrong with it?
I'm totally confused

Answer 1

Why are you using data-toggle="collapse" class="collapsed" on every hyperlink?. your code has data-toggle="collapse" class="collapsed" in every hyperlink.Bootstrap will prevent the default click event of a href .So remove every data-toggle="collapse" class="collapsed" part of a href in your code and it will work.
<li>
<i class="fa fa-flag-checkered" aria-hidden="true"></i> <span>Lead</span> <i class="icon-submenu lnr lnr-chevron-left"></i>
<div id="lead" class="collapse ">
<ul class="nav">
<li><i class="fa fa-quote-right" aria-hidden="true"></i><span> Quotation </span><i class="icon-submenu lnr lnr-chevron-left"></i>
<div id="quotation" class="collapse ">
<ul class="nav">
<li></i> Create Quotation</li>
<li></i> Quotation Summary</li>
<li></i> Send Quotation</li>
</ul>
</div>
</li>
</ul>
</div>
</li>