由于我对原始发帖人询问触发事件感到有点困惑，但他试图做的是（从代码中）监听事件。
所以，我会尝试解决这两个问题。
OP 的 HTML 没有在导航栏菜单中显示任何内容。我将使用 Bootstrap 文档中的示例。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-controls="main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<p>
Custom buttons
<button id="trigger">
collapse/expand.
</button>
<button id="triggerexpand">
expand.
</button>
<button id="triggercollapse">
collapse.
</button>
</p>
$('#main_nav').on('hide.bs.collapse', function() {
console.log('on collapsing')
});
$('#main_nav').on('hidden.bs.collapse', function() {
console.log('collapsed')
});
$('.navbar-collapse').on('show.bs.collapse', function() {
console.log("on showing");
});
$('.navbar-collapse').on('shown.bs.collapse', function() {
console.log("already shown");
});
$('#trigger').on('click', (e) => {
e.preventDefault();
console.log('trigering');
const event1 = new CustomEvent('hide.bs.collapse', { bubbles: true});
const event2 = new CustomEvent('hidden.bs.collapse', { bubbles: true});
let thisButton = e.target;
// use dispatchEvent() (not working).
$('#main_nav')[0].dispatchEvent(event1);// not working.
$('#main_nav')[0].dispatchEvent(event2);// not working.
// try to dispatch event on root document (not working).
document.dispatchEvent(event1);// not working.
document.dispatchEvent(event2);// not working.
// use jQuery.trigger() (not working).
$('#main_nav').trigger('hide.bx.collapse');// not working.
$('#main_nav').trigger('hidden.bx.collapse');// not working.
// do jQuery trigger "click". (collapse/expand WORK).
$('.navbar-toggler').trigger('click');
});
$('#triggerexpand').on('click', (e) => {
e.preventDefault();
// trigger to expand only.
let myCollapse = document.getElementById('main_nav');
let bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
});
bsCollapse.show();
});
$('#triggercollapse').on('click', (e) => {
e.preventDefault();
// trigger to collapse only.
let myCollapse = document.getElementById('main_nav');
let bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
});
bsCollapse.hide();
});
在上面的代码中，我在导航栏上监听所有 4 个事件。您可以使用任何选择器（#main_nav 或 .navbar-collapse）。
您使用的事件侦听器已经正确，以防您想侦听事件而无法正常工作，这来自您不正确的 HTML。
我在您的问题中添加了触发按钮来执行触发事件。请再次注意，触发事件与监听事件不同。
要触发事件，您不能只使用.dispatchEvent() 或.trigger() 和事件名称。这不适用于 Bootstrap 折叠事件。
要使触发事件起作用，您必须改为触发点击。使用.trigger('click') 会告诉jQuery 点击那个按钮，导航栏会折叠/展开，事件会被触发。
在jsfiddle 1、2 中查看。