ColorlibHQ / AdminLTE

AdminLTE - Free admin dashboard template based on Bootstrap 5
https://adminlte.io
MIT License
44.11k stars 18.17k forks source link

how to keep sidebar open when click sub menu[v2.4.2] #1806

Closed nslogx closed 6 years ago

nslogx commented 6 years ago

Hello, Thanks for your greate job. I use adminLTE in my Flask project, but when I click sub menu, all menu will be refresh and closed, I have already spend too many time for this, please help me

nslogx commented 6 years ago

I have add a sidebar in base_site.html, all views was extends the base_site.html,So, how can I keep the sidebar menu open when click sub menu, If anyone can help, I would be very wonderful, thanks

image base_site.html

nslogx commented 6 years ago

@almasaeed2010 @REJack

REJack commented 6 years ago

Please provide your code from sidebar.html too or a complete rendered version of the whole template.

nslogx commented 6 years ago

code.zip @REJack here is the code of sidebar.html, base_site.html, thanks

nslogx commented 6 years ago

demo

REJack commented 6 years ago

Oh ok you need the active class on your sidebar entries, you can do this either through the Flask's templating engine Jinja2 they have a nice Highlighting Active Menu Items tutorial/example or you add a simple javascript with this lines:

/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
     return this.href == url;
}).parent().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
     return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');
nslogx commented 6 years ago

@REJack Good job,Thanks

ckoleysmartsol commented 5 years ago

Thanks @REJack .. it works... Thank you so much

coderMmw commented 5 years ago

Oh ok you need the active class on your sidebar entries, you can do this either through the Flask's templating engine Jinja2 they have a nice Highlighting Active Menu Items tutorial/example or you add a simple javascript with this lines:

/** add active class and stay opened when selected */
var url = window.location;

// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
   return this.href == url;
}).parent().addClass('active');

// for treeview
$('ul.treeview-menu a').filter(function() {
   return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active');

hello! I have the same problem, do as you say, but it still has no effect. here is my code `<!DOCTYPE html>

AdminLTE 3 | Dashboard

jsGrid

Copyright © 2014-2019 AdminLTE.io. All rights reserved.
Version 3.0.0-rc.1

`

DariusDarvish commented 4 years ago

Hi, I was wondering how we can keep the parent directory open and highlight the current page we are on. Something like the link below: https://adminlte.io/themes/AdminLTE/pages/charts/flot.html

Thank You, Darius