@lev89

Как активировать меню боковой панели?

Активное меню боковой панели AdminLTE не меняется динамически
<ul class="nav nav-pills nav-stacked">
   <li><a href="index.html"><i class="fa fa-home"></i> <span>Dashboard</span></a></li>
   <li><a href="messages.html"><span class="pull-right badge">5</span><i class="fa fa-envelope-o"></i> <span>Messages</span></a></li>
   <li class="active parent"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a>
		<ul class="children">
			<li><a href="alerts.html">Alerts &amp; Notifications</a></li>
			<li class="active"><a href="buttons.html">Buttons</a></li>
			<li><a href="extras.html">Extras</a></li>
			<li><a href="graphs.html">Graphs &amp; Charts</a></li>
			<li><a href="icons.html">Icons</a></li>
			<li><a href="modals.html">Modals</a></li>
		</ul>
	</li>
	<li class="parent"><a href=""><i class="fa fa-edit"></i> <span>Forms</span></a>
		<ul class="children">
			<li><a href="code-editor.html">Code Editor</a></li>
			<li><a href="general-forms.html">General Forms</a></li>
			<li><a href="form-layouts.html">Layouts</a></li>
			<li><a href="wysiwyg.html">Text Editor</a></li>
			<li><a href="form-validation.html">Validation</a></li>
			<li><a href="form-wizards.html">Wizards</a></li>
		</ul>
	</li>
    <li class="parent"><a href=""><i class="fa fa-bars"></i> <span>Tables</span></a>
		<ul class="children">
			<li><a href="basic-tables.html">Basic Tables</a></li>
			<li><a href="data-tables.html">Data Tables</a></li>
		</ul>
    </li>
	<li><a href="maps.html"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li>
	<li class="parent"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a>
        <ul class="children">
			<li><a href="notfound.html">404 Page</a></li>
			<li><a href="blank.html">Blank Page</a></li>
			<li><a href="calendar.html">Calendar</a></li>
			<li><a href="invoice.html">Invoice</a></li>
			<li><a href="locked.html">Locked Screen</a></li>
		</ul>
	</li>             
</ul>
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 2
@lev89 Автор вопроса
нашел в интернете такой скрипт
<script>
    $('.nav-pills a').each(function(){
        let location = window.location.protocol + '//' + window.location.host + window.location.pathname;
        let link = this.href;
        if(link == location){
            $(this).addClass('active');
        }
    });
</script>

не работает
Ответ написан
Комментировать
Rst0
@Rst0
там в шаблоне есть еще custom.js
по идее он и рулит этим функционалом
там кроме озвученного еще есть функции.
Скопировал по ссылке
замените найденный колхоз и должно все заработать как в оригинале

//custom.js
jQuery(document).ready(function() {

   "use strict";

   // Tooltip
   jQuery('.tooltips').tooltip({ container: 'body'});

   // Popover
   jQuery('.popovers').popover();

   // Show panel buttons when hovering panel heading
   jQuery('.panel-heading').hover(function() {
      jQuery(this).find('.panel-btns').fadeIn('fast');
   }, function() {
      jQuery(this).find('.panel-btns').fadeOut('fast');
   });

   // Close Panel
   jQuery('.panel .panel-close').click(function() {
      jQuery(this).closest('.panel').fadeOut(200);
      return false;
   });

   // Minimize Panel
   jQuery('.panel .panel-minimize').click(function(){
      var t = jQuery(this);
      var p = t.closest('.panel');
      if(!jQuery(this).hasClass('maximize')) {
         p.find('.panel-body, .panel-footer').slideUp(200);
         t.addClass('maximize');
         t.find('i').removeClass('fa-minus').addClass('fa-plus');
         jQuery(this).attr('data-original-title','Maximize Panel').tooltip();
      } else {
         p.find('.panel-body, .panel-footer').slideDown(200);
         t.removeClass('maximize');
         t.find('i').removeClass('fa-plus').addClass('fa-minus');
         jQuery(this).attr('data-original-title','Minimize Panel').tooltip();
      }
      return false;
   });

   jQuery('.leftpanel .nav .parent > a').click(function() {

      var coll = jQuery(this).parents('.collapsed').length;

      if (!coll) {
         jQuery('.leftpanel .nav .parent-focus').each(function() {
            jQuery(this).find('.children').slideUp('fast');
            jQuery(this).removeClass('parent-focus');
         });

         var child = jQuery(this).parent().find('.children');
         if(!child.is(':visible')) {
            child.slideDown('fast');
            if(!child.parent().hasClass('active'))
               child.parent().addClass('parent-focus');
         } else {
            child.slideUp('fast');
            child.parent().removeClass('parent-focus');
         }
      }
      return false;
   });


   // Menu Toggle
   jQuery('.menu-collapse').click(function() {
      if (!$('body').hasClass('hidden-left')) {
         if ($('.headerwrapper').hasClass('collapsed')) {
            $('.headerwrapper, .mainwrapper').removeClass('collapsed');
         } else {
            $('.headerwrapper, .mainwrapper').addClass('collapsed');
            $('.children').hide(); // hide sub-menu if leave open
         }
      } else {
         if (!$('body').hasClass('show-left')) {
            $('body').addClass('show-left');
         } else {
            $('body').removeClass('show-left');
         }
      }
      return false;
   });

   // Add class nav-hover to mene. Useful for viewing sub-menu
   jQuery('.leftpanel .nav li').hover(function(){
      $(this).addClass('nav-hover');
   }, function(){
      $(this).removeClass('nav-hover');
   });

   // For Media Queries
   jQuery(window).resize(function() {
      hideMenu();
   });

   hideMenu(); // for loading/refreshing the page
   function hideMenu() {

      if($('.header-right').css('position') == 'relative') {
         $('body').addClass('hidden-left');
         $('.headerwrapper, .mainwrapper').removeClass('collapsed');
      } else {
         $('body').removeClass('hidden-left');
      }

      // Seach form move to left
      if ($(window).width() <= 360) {
         if ($('.leftpanel .form-search').length == 0) {
            $('.form-search').insertAfter($('.profile-left'));
         }
      } else {
         if ($('.header-right .form-search').length == 0) {
            $('.form-search').insertBefore($('.btn-group-notification'));
         }
      }
   }

   collapsedMenu(); // for loading/refreshing the page
   function collapsedMenu() {

      if($('.logo').css('position') == 'relative') {
         $('.headerwrapper, .mainwrapper').addClass('collapsed');
      } else {
         $('.headerwrapper, .mainwrapper').removeClass('collapsed');
      }
   }

});

очередность
624ea82b9091f811562036.png
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы