我有典型的 W3.CSS 懸停下拉選單，但我希望在準備好之前禁用它：
<div id="A" class="w3-dropdown-hover" style="width: 100%;">
<button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button>
<div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;">
<p>2B</p>
<p>|| !2B</p>
</div>
</div>
正如你所看到的，我已經把它放在了disabled上面button，它看起來像你期望的那樣被禁用。
但是當我懸停時下拉選單仍然出現。我不要那個。我只希望在按鈕未禁用時打開下拉選單。
你顯然不能把disabledon C，因為 the disabledonly 適用于buttons, inputs 等。
我把disabled?
當我準備好使用 javascript 時，如何洗掉/重新應用disabled? 我的意思是，我在“A”、“B”或“C”中的哪一個上應用了 jQuery$("#A_Letter").prop('disabled', false);
編輯：我唯一能想到的就是放在disabled按鈕上并暫時將“A”的類更改為w3-dropdown-click.
uj5u.com熱心網友回復：
我會應用一些 css 來“禁用”指標事件，這樣您的瀏覽器就不會檢測到任何懸停操作：
<div id="A" class="w3-dropdown-hover" style="width: 100%; pointer-events: none;">
演示片段：
顯示代碼片段
<link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/>
<div id="A" class="w3-dropdown-hover" style="width: 100%; pointer-events: none;">
<button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button>
<div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;">
<p>2B</p>
<p>|| !2B</p>
</div>
</div>當我準備好使用 javascript 時，如何洗掉/重新應用禁用的
對于自動切換兩種狀態，我們可以：
- 將 移動
pointer-events:none到 CSS 類，以便我們可以使用toggleClass() - 使用
prop到切換禁止狀態
function toggle() {
$("#A").toggleClass('disabled-hover');
$('#B').prop('disabled', (i, v) => !v);
}.disabled-hover {
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css" rel="stylesheet"/>
<div id="A" class="w3-dropdown-hover disabled-hover" style="width: 100%;">
<button id="B" disabled class="w3-button" style="width: 100%;">Hover To Open</button>
<div id="C" class="w3-dropdown-content w3-bar-block w3-border" style="width: 100%;">
<p>2B</p>
<p>|| !2B</p>
</div>
</div>
<button onclick='toggle()'>Toggle Disabled</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/310031.html
標籤：javascript html w3.css