You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

Introduction

In the DX-Admin theme of Joget's UI, one thing that you may notice is that when you click on a different category, the other categories will collapse automatically. You can see this behavior in Figure 1. This option comes as default and can't be configured within the settings. Fortunately, we can work around this issue by simply modifying the Custom Javascript.

Figure 1: Example of Collapsing Category


Implementation

In order to disable this behavior, you can implement the code below in the UI Builder > Settings > Configure DX-X Admin > Advanced > Custom Javascript.

Javascript
layui.use(["layer", "element", "jquery"], function () {
  $(".left-nav #nav").off("click");
  $(".left-nav #nav").on("click", "li", function (event) {
    $(".left-nav").find("a").removeClass("active");
    $(this).children("a").addClass("active");
    if ($(this).children(".sub-menu").length) {
      if ($(this).hasClass("open")) {
        $(this).removeClass("open");
        $(this).find(".nav_right").html("");
        $(this).children(".sub-menu").stop(true, true).slideUp();
      } else {
        $(this).addClass("open");
        $(this).children("a").find(".nav_right").html("");
        $(this).children(".sub-menu").stop(true, true).slideDown();
      }
    }
  });
});


Figure 2: Implementation


Figure 3: After Implementation


Download the Sample App

  • No labels