禁用 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时，我如何remove/reapply disabled？我的意思是，我要在“A”、“B”或“C”中的哪一个上应用 jQuery $("#A_Letter").prop('disabled', false);

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

Answer 1

我会将一些 css 应用到 'disable' 和 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>

When I am ready in my javascript, how do I remove/reapply the disabled

为了自动切换两种状态，我们可以：

将 pointer-events:none 移动到 CSS class 这样我们就可以使用 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>

禁用 W3.CSS 悬停下拉菜单

Disable W3.CSS Hover Dropdown

html

javascript

w3.css