禁用W3.CSS悬停下拉菜单

Question

我有一个典型的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上，它看起来像你期望的那样被禁用了。

但是当我悬停时下拉框仍然出现。我不想那样。我只希望下拉菜单在按钮未禁用时打开。

你显然不能把disabled放在C上，因为disabled只适用于buttons,inputs等。

我把disabled放在哪里?

当我准备在我的javascript，我如何删除/重新应用disabled?我的意思是，在哪个"A"， "或";C"我用jQuery$("#A_Letter").prop('disabled', false);

编辑:我唯一能想到的就是把disabled放在按钮上，并暂时改变类"A"到w3-dropdown-click.

Answer 1

我会应用一些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>