Difficulty Function JavaScript Sidebar Menu

Question

Difficulty Function JavaScript Sidebar Menu

Navigation

#1 by (1 votes)

1

I have a difficulty where the code I have made so far is not acting the way I need it. The fact is that after the class of the sub-menu is activated, the menu does not minimize. That is, after being enabled, it gets maximized until I select another menu li .

If anyone has any suggestions, it may be a blunder. Here is the code:

     var handleNav = function() {
             var page  = $('#page-container');
             var sidebar = $('#sidebar');
             var allLinks = $('.sidebar-nav a', sidebar);
             var menuLinks = $('.sidebar-nav-menu', sidebar);
             var submenuLinks = $('.sidebar-nav-submenu', sidebar);
            
             allLinks.on('click', function(e) {
              var link = $(this),
               ripple, d, x, y;
            
              sidebar.find('.sidebar-nav-ripple').removeClass('animate');
            
              if (link.children('.sidebar-nav-ripple').length === 0) {
               link.prepend('<span class="sidebar-nav-ripple"></span>');
              }
            
              var ripple = link.children('.sidebar-nav-ripple');
            
              if (!ripple.height() && !ripple.width()) {
               d = Math.max(link.outerWidth(), link.outerHeight());
               ripple.css({
                height: d,
                width: d
               });
              }
            
              x = e.pageX - link.offset().left - ripple.width() / 2;
              y = e.pageY - link.offset().top - ripple.height() / 2;
            
              ripple.css({
               top: y + 'px',
               left: x + 'px'
              }).addClass('animate');
             });
             menuLinks.on('click', function(e) {
              var link = $(this);
              var windowW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            
              if (page.hasClass('sidebar-visible-lg-mini') && (windowW > 991)) {
               if (link.hasClass('open')) {
                link.removeClass('open');
               } else {
                $('#sidebar .sidebar-nav-menu.open').removeClass('open');
                link.addClass('open');
               }
              } else if (!link.parent().hasClass('active')) {
               if (link.hasClass('open')) {
                link.removeClass('open');
               } else {
                $('#sidebar .sidebar-nav-menu.open').removeClass('open');
                link.addClass('open');
               }
            
               setTimeout(resizePageContent, 50);
              }
            
              return false;
             });
            
             submenuLinks.on('click', function(e) {
              var link = $(this);
            
              if (link.parent().hasClass('active') !== true) {
               if (link.hasClass('open')) {
                link.removeClass('open');
               } else {
                link.closest('ul').find('.sidebar-nav-submenu.open').removeClass('open');
                link.addClass('open');
               }
            
               setTimeout(resizePageContent, 50);
              }
            
              return false;
             });
            };
            var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
            
            $(".sidebar-nav li a").each(function() {
             if ($(this).attr("href") == pgurl || $(this).attr("href") == '') {
              $(this).addClass(" active");
              $(this).parent().parent().parent().addClass(" active");
              $(this).parent().parent().parent().parent().parent().addClass(" active");
             }
            });

    .sidebar-nav {
        list-style: none;
        margin: 0;
        padding: 10px 0 0
    }
    
    
    .sidebar-separator i {
        opacity: .1
    }
    
    #sidebar-toggle-mini {
        display: none
    }
    
    .sidebar-nav-ripple {
        display: block;
        position: absolute;
        background: rgba(92, 205, 222, .3);
        border-radius: 100%;
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    
    .sidebar-nav-ripple.animate {
        -webkit-animation: ripple 1s ease-out;
        animation: ripple 1s ease-out
    }
    
    @-webkit-keyframes ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(3)
        }
    }
    
    @keyframes ripple {
        100% {
            opacity: 0;
            -webkit-transform: scale(3);
            transform: scale(3)
        }
    }
    
    .sidebar-nav a {
        display: block;
        color: #8da4bb;
        padding: 0 10px;
        min-height: 40px;
        line-height: 40px;
        overflow: hidden;
        position: relative
    }
    
    .sidebar-nav a.active,
    .sidebar-nav a.open,
    .sidebar-nav a:focus,
    .sidebar-nav a:hover,
    .sidebar-nav li.active>a {
        color: #fff;
        text-decoration: none
    }
    
    .sidebar-nav a.open,
    .sidebar-nav li.active>a {
        background: #25313e;
        border-right: 4px solid #3180FF
    }
    
    .sidebar-nav li>ul li a {
        font-size: 13px
    }
    
    .sidebar-nav li>ul li a.active {
        background: 0 0;
        color: #fff;
        border-right: none
    }
    
    .sidebar-nav a.active {
        background: #25313e;
        color: #fff;
        border-right: 4px solid #3180FF
    }
    
    .sidebar-nav a>.sidebar-nav-icon {
        margin-right: 10px
    }
    
    .sidebar-nav a>.sidebar-nav-icon,
    .sidebar-nav a>.sidebar-nav-indicator {
        display: inline-block;
        opacity: .5;
        width: 18px;
        font-size: 14px;
        text-align: center
    }
    
    .sidebar-nav a>.sidebar-nav-indicator {
        float: right;
        line-height: inherit;
        margin-left: 4px;
        font-size: 10px;
        -webkit-transition: -webkit-transform .15s ease-out;
        transition: transform .15s ease-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden
    }
    
    
    .sidebar-nav a.active>.sidebar-nav-indicator,
    .sidebar-nav a.open>.sidebar-nav-indicator,
    .sidebar-nav li.active>a>.sidebar-nav-indicator {
        -webkit-transform: rotate(-90deg) rotateZ(0);
        transform: rotate(-90deg) rotateZ(0)
    }
    
    .sidebar-nav ul {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: transparent;
        -webkit-transition: background .25s ease-out;
        transition: background .25s ease-out
    }
    
    .sidebar-nav .active>ul,
    .sidebar-nav .open+ul {
        display: block;
        background: #25313e
    }
    
    .sidebar-nav ul a {
        margin: 0 0 0 19px;
        padding-left: 19px;
        border-left: 1px solid #454e59;
        min-height: 34px;
        line-height: 34px;
        font-weight: 400
    }
    
    .sidebar-nav ul a.open,
    .sidebar-nav ul li.active>a {
        background: 0 0
    }
    
    .sidebar-nav ul li:before {
        background: #454e59;
        bottom: auto;
        content: "";
        height: 7px;
        left: 16px;
        margin-top: 14px;
        position: absolute;
        right: auto;
        width: 7px;
        z-index: 1;
        border-radius: 50%
    }
    
    @media screen and (min-width:992px) {
        #page-container.sidebar-visible-lg-mini #sidebar .sidebar-content .sidebar-nav ul li:before {
            display: none
        }
    }
    
    .sidebar-nav ul ul {
        margin: 0 0 0 19px
    }
    
    .sidebar-nav ul ul a {
        margin: 0;
        padding-left: 19px;
        font-size: 13px;
        min-height: 32px;
        line-height: 32px
    }
    
    .sidebar-nav ul .active>ul,
    .sidebar-nav ul .open+ul {
        background-color: #454e59
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="page-container" class="header-fixed-top">
            <div id="sidebar">
            <ul class="sidebar-nav">
                <li>
                    <a href="javascript:void(0)">
                        <i class="gi gi-compass sidebar-nav-icon"></i>
                        <span class="sidebar-nav-mini-hide">Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="inddex.html">
                        <i class="gi gi-compass sidebar-nav-icon"></i>
                        <span class="sidebar-nav-mini-hide">Dashboard</span>
                    </a>
                </li>
                <li class="sidebar-separator">
                    <i class="fa fa-ellipsis-h"></i>
                </li>
                <li>
                    <a href="#" class="sidebar-nav-menu">
                        <i class="fa fa-chevron-left sidebar-nav-indicator sidebar-nav-mini-hide"></i>
                        <i class="fa fa-cog sidebar-nav-icon"></i>
                        <span class="sidebar-nav-mini-hide">Dropdown</span>
                    </a>
                    <ul>
                        <li>
                            <a href="index.html">Link #1</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">Link #2</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

javascript html

asked by anonymous 26.12.2018 / 00:11

1 answer

___ ___ erkimt problems StrictMode.ThreadPolicy ______ qstntxt ___

Hello, I have the link below

link

handing me a string %code% % type

%pre%

So, in %code% , handle it with% %code% below:

%pre%

This %code% % works normally. However, you need to put the code snippet below;

%pre%

Otherwise, the connection to the internet is NOT established.

However, I've added the INTERNET access permission on the %code% .

%pre%

But no use.

If I remove this block of code

%pre%

The connection to %code% does not.

The problem is that if I work that way, as often as the ones I need to access the %code% % is the same number of times you have to make use of this code snippet.

Is not there a general configuration file for this in %code% %?

Following the %code% % JsonClass

%pre%

______ azszpr352394 ___

What happens is that your %code% tries to access the network (a blocking operation) in the main Android thread, which is not allowed.

You can read more about this , but to summarize: A The main Android thread is responsible for updating the views.

Doing blocking tasks such as accessing the network or the database in this thread causes the view to crash, giving that impression of lag in the application.

The above link also gives you an alternative to solve this problem: do this type of tasks within AsyncTasks .

I particularly prefer to delegate all this work to libraries like Retrofit .

Doing what you want with this lib is very trivial:

After adding dependencies , define the contract on an interface:

%pre%

Starts the service instance:

%pre%

And to consume the service in a non-blocking way, just call:

%pre%

Now, within the callback %code% you already have the webservice response parseada and ready to use.

___ Indent error

score 1 · Accepted Answer

What you need to do is remove the .active class from the elements by clicking Dropdown. This class prevents Dropdown from closing.

For this, a else in if is missing within the menuLinks.on('click'... event:

...
else{
   link.removeClass("active");
   link.parent().removeClass("active");
}

Looking like this:

menuLinks.on('click', function(e){
   var link = $(this);
   var windowW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

   if (page.hasClass('sidebar-visible-lg-mini') && (windowW > 991)) {
   console.log("dvd1");
      if (link.hasClass('open')) {
         link.removeClass('open');
      }
      else {
         $('#sidebar .sidebar-nav-menu.open').removeClass('open');
         link.addClass('open');
      }
   }
   else if (!link.parent().hasClass('active')) {
      if (link.hasClass('open')) {
         link.removeClass('open');
      }
      else {
         $('#sidebar .sidebar-nav-menu.open').removeClass('open');
         link.addClass('open');
      }

      setTimeout(resizePageContent, 50);
   }
   // AQUI!
   else{
      link.removeClass("active");
      link.parent().removeClass("active");
   }

   return false;
});

Clicking on "Dropdown" will remove the .active class from the link and <li> .