How to remake JS so that the submenu opens on clicking on the li area, and not on the button?

Question

JavaScript

Hello.
I'm going here in a simple and not a simple way. I want to make myself a quick site on WP on a ready-made theme from Astra. But there are problems that do not suit me. So far, I've only encountered them in a hat, I hope they won't be there anymore.

1. I’ll start with the one I didn’t cope with: I don’t like that in the mobile version of the menu, in order to open a submenu, you need to click specifically on the button in the form of a checkmark, I want it to open when you click on the entire line, on the area li.
With the help of such a tool, I tracked down the js section that is supposedly responsible for this:

function d(e) {
        if (e) {
            var t = e.getElementsByTagName("button")[0];
            if (void 0 !== t || void 0 !== (t = e.getElementsByTagName("a")[0])) {
                var a = e.getElementsByTagName("ul")[0];
                if (void 0 !== a) {
                    a.setAttribute("aria-expanded", "false"), -1 === a.className.indexOf("nav-menu") && (a.className += " nav-menu"), t.onclick = function () {
                        -1 !== e.className.indexOf("toggled") ? (e.className = e.className.replace(" toggled", ""), t.setAttribute("aria-expanded", "false"), a.setAttribute("aria-expanded", "false")) : (e.className += " toggled", t.setAttribute("aria-expanded", "true"), a.setAttribute("aria-expanded", "true"))
                    };
                    for (var n = a.getElementsByTagName("a"), s = a.getElementsByTagName("ul"), o = 0, l = s.length; o < l; o++) s[o].parentNode.setAttribute("aria-haspopup", "true");
                    for (o = 0, l = n.length; o < l; o++) n[o].addEventListener("focus", L, !0), n[o].addEventListener("blur", L, !0), n[o].addEventListener("click", b, !0)
                } 
                else t.style.display = "none"
            }
        }
    }

In particular, the tool shows this line:

-1 !== e.className.indexOf("toggled") ? (e.className = e.className.replace(" toggled", ""), t.setAttribute("aria-expanded", "false"), a.setAttribute("aria-expanded", "false")) : (e.className += " toggled", t.setAttribute("aria-expanded", "true"), a.setAttribute("aria-expanded", "true"))

I am zero in js. I poked around and got nowhere. The reaction of the tool changes not to the button, but to the entire area li, but the work remains the same.
Please tell me what to fix.
Perhaps it would be more interesting to make a third-party additional js file that would redefine this event or supplement it. It seems to me that this is more correct, because, probably, if I update the theme, then my changes inside their files will fly off.
I am also ready to move so that the click is not on the entire li area, but perhaps only on the word.

2. For some reason, to create a submenu, you need to have a separate, in my case, unnecessary page.
Here I have the "Services" item, where there will be 3 items.
I don't want to have a separate service page, but since I want to create a submenu, it's necessary to have such a page due to the nature of wp or this theme, I don't quite get it yet.
I decided simply by the fact that I created such a page, it has empty content, I will remove it later from indexing in robots.txt.
And in the "Additional Styles" window in the wp designer, I just threw in the code

.menu-item-316 > a {
  pointer-events: none;
}

Addition:
I poked the button and looked at what was happening with the html code, based on this I tried to write my own js:

let nav = document.querySelector('#site-navigation');
let ul = document.querySelector('#ast-hf-menu-1');
let click_li = document.querySelector('.menu-item-316');
let button = document.querySelector('.menu-item-316 button');
let sub_ul = document.querySelector('.menu-item-316 ul');

click_li.on('click', function(){
    nav.className += "toggled";
    ul.attr("aria-expanded", true);
    click_li.className += "ast-submenu-expanded";
    button.attr("aria-expanded", true);
    sub_ul.style.display = 'block';
});

At least only for opening, does not work.

Answer 1

For some reason, all the answers were given to me in the comments, so I can’t select the right one.
The answers were only to my 1st question and all the answers are aimed at creating a separate js, no one suggested picking the old one from the topic.
Sergey Sergey , gave a useful answer in a comment, this answer was closest to me.
But it doesn't work. Most likely due to the specificity of already written js from the theme.
But this answer became a study object for me, and I learned more about the use of selectors and a lot of new things. In general, he led me to many questions, the answers of which I found in Google.
As a result, I tried many different approaches and now settled on this code:

$('li.menu-item-has-children').on('click', function() {
  //var stl = $('ul', 'li.menu-item-has-children').attr ('style');
  var stl = $('li.menu-item-has-children', 'div#ast-mobile-header').children("ul").attr ('style');
  if (stl == 'display: none;'){
    $('ul', 'li.menu-item-has-children').attr ('style', 'display: block;');
  }
  else {$('ul', 'li.menu-item-has-children').attr ('style', 'display: none;');}
  //return false; //перестаёт работать ссылка в вложенном меню
});

And I'm completely confused.
I need help again, I don’t know if the continuation of my questions will be visible and if there will be activity, while I try here, if it doesn’t work out, I will create a new question.
The menu unfolds.
Questions:
1. For some reason, using return false or true at the end, the link of the expandable (nested) menu stops working. Apparently I'm not catching up with this logic so far.
2. There is a commented section in the code:

//var stl = $('ul', 'li.menu-item-has-children').attr ('style');

If you declare a variable like this, then for some reason the work happens like this:
I open the mobile menu, click on the link, waiting for the submenu to open, but it changes in shade and does not open from the 1st click, but after such a click, everything works. At what the same effect appeared in the button with an arrow, which was originally designed by the theme to open the submenu.
3. And here is a miracle. The flow of thoughts was like this, I don’t want my js to “litter” the site. And, using these selectors, js also makes changes to the header of the desktop version (these headers are decorated with different blocks).
I wanted to limit the js to only the header of the mobile version.
Here is my attempt:

var stl = $('li.menu-item-has-children', 'div#ast-mobile-header').children("ul").attr ('style');

I assumed that I take elements with a ul tag that lie in li elements with the menu-item-has-children class, i.e. only in links that have submenus, and I want them to be li's that are in the div block with id ast-mobile-header.
It didn't work, js still changes the style of the element in the header of the desktop version. BUT! The problem described in the 2nd question is gone, but the button with the arrow remains. WHAT MIRACLES! I'm doing something here and I don't know what. Help me figure it out)
Just in case, I'll attach a screenshot of the menu. I do it locally.