禁用 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”、“B”或“C”中的哪一个上应用 jQuery $("#A_Letter").prop('disabled', false);

编辑：我唯一能想到的是将disabled 放在按钮上，然后暂时将“A”类更改为w3-dropdown-click。

Answer 1

我会应用一些 CSS 来“禁用”pointer events，这样您的浏览器就不会检测到任何悬停动作：

<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 到toggle the disabled state

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>