這個問題很可能是重復的，但我似乎無法找到任何其他相關問題的答案。當導航欄在較小的螢屏上折疊時，您如何觸發表明折疊按鈕圖示已被單擊的事件？我曾嘗試使用以下 js 代碼無濟于事：
$('#main_nav').on('hidden.bs.collapse', function () {
alert('collapse')
})
或這個：
$('.navbar-collapse').on('show.bs.collapse', function () {
console.log("collapse");
});
到目前為止，這是我的代碼：
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="autohide navbar navbar-expand-lg navbar-dark" id='my-nav' >
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="" alt="logo" width="40" height="40" id="logo"/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav">
<span className="navbar-toggler-icon" id="toggler"></span>
</button>
<div class="collapse navbar-collapse text-color" id="main_nav">
</div>
</div>
</nav>
為了呼叫在較小螢屏上單擊折疊按鈕時發生的事件，我應該在 jquery 事件偵聽器中參考哪個類/ID？
uj5u.com熱心網友回復：
由于我有點困惑原始海報詢問觸發事件，但他試圖做的是監聽事件（從代碼）。
所以，我會努力解決這兩個問題。
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')will 告訴 jQuery 單擊該按鈕，導航欄將折疊/展開，事件將被觸發。
在jsfiddle 1、2 中看到它。
uj5u.com熱心網友回復：
為了讓 Bootstrap 中的事件正常作業，請務必在頭部輸入 jQuery 和 boostrap.js。
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
然后在事件的情況下，必須在具有 .navbar 類的父元素上觸發事件。
$('.navbar').on('show.bs.collapse', function () {
console.log("collapse");
});
還要將您的 html 代碼修改為下面的形式
<nav class="navbar navbar-expand-lg navbar-light bg-light" id='my-nav'>
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="" alt="logo"/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-color" id="main_nav">
</div>
</div>
</nav>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/387814.html
標籤：javascript html 查询 css
上一篇：前端獲取ajax呼叫進度狀態