I need to use require js to use jquery in my block(Magento2). Do I have to declare for each function require JS at each beginning or there is a way to declare it only once?
here is my code, thanks
my html
<div class="mainMenu">
<div style="background-color: black;color: white;">
<div onClick="openCategory(1)">MENU 1</div>
<div onClick="openCategory(2)">MENU 2</div>
<div onClick="openCategory(3)">MENU 3</div>
</div>
</div>
<div onClick="openMainMenu()">
OUVRIR MENU
</div>
SCRIPT inside phtml
<script>
let menu
require(['jquery', 'jquery/ui'], function($){
$.ajax({
url: "https://catfact.ninja/fact",
context: document.body
}).done(function(value) {
menu = []
menu.forEach(element => {
$('.mainMenu').append("<div class='menuContainer menuNumber" + element.id + "'>" + element.name + "</div>")
});
});
});
function openMainMenu(){
require(['jquery', 'jquery/ui'], function($){
$('.mainMenu').show()
});
}
function openCategory(categoryNumber){
require(['jquery', 'jquery/ui'], function($){
console.log($('.menuNumber' + categoryNumber).css("visibility", "visible"));
});
}
</script>