Html 使用css动态更改单击时的div显示

我有下面的代码，parentAppliance是主左导航表的一部分，在设备上方悬停时，我看到一个子表包含运行状况。现在我想当我点击“健康”时，子表消失，有什么想法吗

CSS:

HTML:

---

为此，您需要使用Javascript/Jquery

HTML

---

您必须添加一些javascript来添加单击的类

还有css

.parentAppliance.clicked .childAppliance { 
display: block;
top: 50px;
left: 130px;
}

---

使用javascript，您可以切换行为类似于悬停的类。

要真正持久地切换状态，您需要javascript。-1请不要发布两次相同的问题。更改第一个以提供更多详细信息，或在再次发布之前将其删除。请不要因为没有第一次得到您喜欢的答案而重新发布。您的HTML代码中没有parentAppliance。

<a href="#/appliance_status.home" hiddentitle="Appliance" id="ui-id-83" class="ui-corner-all" tabindex="-1" role="menuitem" aria-haspopup="true" title="" data-original-title="">
    <span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><ins class="ui-navigation-static-menu-icon ui-navigation-static-menu-icon-backup"></ins>
    <span class="ui-navigation-static-menu-text" style="display: inline;">Appliance</span>
</a>
<ul id="ApplianceSubTable" class="ui-menu ui-widget ui-widget-content ui-corner-all childAppliance" role="menu" aria-hidden="true" aria-expanded="false" aria-labelledby="ui-id-83">
    <li itemid="Health" class="ui-menu-item" role="presentation">
        <a href="#/appliance_status.home" hiddentitle="Health" id="ui-id-33" class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title="">
            <span class="ui-navigation-static-menu-text">Health</span>
        </a>
    </li>
</ul>

<li itemid="Health" class="ui-menu-item" role="presentation" id="Health">

$( "#Health" ).click(function() {
  $('#ApplianceSubTable').hide();
});

$('.parentAppliance').on('click', function () { $(this).toggleClass('clicked'); });

.parentAppliance.clicked .childAppliance { 
display: block;
top: 50px;
left: 130px;
}