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