How can these two html codes be changed without changing JS?

the great gods on the previous celestial board taught the mysql personalization method (the same query)
now want to learn some JS personalization methods
is it possible to convert without moving the html?

for example 

$(".status-btn").mouseenter(function(e) {
  var public_order_id = e.currentTarget.dataset.public_order_id;
  var id = e.currentTarget.dataset.id;
  var type = e.currentTarget.dataset.type;

  $("."+type+"-"+public_order_id+", .status-sublist-layout-after-btn").show();
});

$(".status-layout").mouseleave(function(e) {
  var public_order_id = e.currentTarget.dataset.public_order_id;
  var id = e.currentTarget.dataset.id;
  var type = e.currentTarget.dataset.type;

  $("."+type+"-"+public_order_id+", .status-sublist-layout-after-btn").hide();
});

$(".status-sublist-layout-after-btn").click(function(event) {
  $(".admin-status-submenu-layout, .admin-status-submenu-layout-large, .status-sublist-layout-after-btn").hide();
});

this paragraph is different from others.
has blog-menu, manager-menu, log-menu, setting-menu
but turns it into quick-menu, and everything else is the same

. 
$(".quick-menu").click(function(e) {
  $(".quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout").hide();
  $(".quick-layout").show();
});
$(".quick-layout").mouseleave(function(e) {
  $(".quick-layout").hide();
});

$(".blog-menu").click(function(e) {
  $(".quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout").hide();
  $(".blog-layout").show();
});
$(".blog-layout").mouseleave(function(e) {
  $(".blog-layout").hide();
});

......

this is the way of exchange that I have thought of at present, and it has been done.
but there must be another way for the gods.
after learning, I can apply other function, to benefit a lot! If you can, I would like to play the principle
Thanksgiving God"s advice!

Jquery javascript
Apr.11,2021 
    //dom
     var maps={
        '.status-btn mouseenter show':'toggle',
        '.status-layout mouseenter hide':'toggle',
        '.status-sublist-layout-after-btn click hide':'clickHide',
        '.quick-menu click .quick-layout':'menuToggle',       
        '.blog-menu click .blog-layout':'menuToggle'
        '.quick-layout mouseleave hide':'layOutMsLvHide',
        '.blog-layout mouseleave hide':'layOutMsLvHide'
        
    }
    
   //
    function   _delegate(name, selector, func,vis) {
        $(document).on(name, selector, function (e) {
            func.apply(null,[e,$(this),vis])
        });
    }
    //map,
   function _scanEventsMap (maps) {        
        var bind = _delegate;
        for (var keys in maps) {
            if (maps.hasOwnProperty(keys)) {
                var matchs = keys.split(' ');
                if (typeof maps[keys] === 'string') {

                    maps[keys] = this[maps[keys]]; 
                }
                bind(matchs[0], matchs[1], maps[keys].bind(this),matchs[3]);
            }
        }
    }
        
    
    
   function toggle(e,jqObj,vis){
      var public_order_id = e.currentTarget.dataset.public_order_id;
      var id = e.currentTarget.dataset.id;
      var type = e.currentTarget.dataset.type;

      $('.'+type+'-'+public_order_id+', .status-sublist-layout-after-btn')[vis]();
    }
    
    function clickHide(e,jqObj,vis){
        $('.admin-status-submenu-layout, .admin-status-submenu-layout-large, .status-sublist-layout-after-btn')[vis]();
    }
    
    function menuToggle(e,jqObj,el){
      $('.quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout').hide();
      $(el).show();
    }
    
    function layOutMsLvHide(e,jqObj,vis){
      jqObj[vis]();
    }
  
  $(function(){
   _scanEventsMap(maps);
  })

I hope I can help you. For a better implementation of
, take a look at my github

.

without the Html structure, the previous script does not have much room for optimization.
the main reason is that the later "special" script must be optimized. Suppose your html structure looks like this: 

$('.quick-menu, .blog-menu, .manager-menu, .log-menu, .setting-menu').click(function(e) {
        var menuName = $(this).attr('class').match(/(\w+)\-menu/)[1];
        $('.' + menuName +'-layout').show().siblings().hide();
    });
$('.quick-layout, .blog-layout, .manager-layout, .log-layout, .setting-layout').mouseleave(function(e) {
         $(this).hide();
    });

Previous: Webpack compilation can not go through, do not understand

Next: The function of a component in react.js, browser caching problem?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e581e5-4548c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e581e5-4548c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?