Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

English
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.


Image Modified

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.

Code Block
titleJavascript
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();
      }
    }
  });
});


Image Modified

Figure 2: Implementation


Figure 3: After Implementation


Download the Sample App