gpt4 book ai didi

html - 通过单击另一个更改 html 标记的样式

转载 作者:行者123 更新时间:2023-11-28 11:41:51 25 4
gpt4 key购买 nike

我有以下代码,parentAppliance 是左侧主导航表的一部分,将鼠标悬停在“Appliance”上时,我看到一个包含“health”的子表。现在我希望当我点击健康时子表格消失,有什么想法吗?

CSS:

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

HTML:

<li id="Appliance" itemid="Appliance" class="parentAppliance" role="presentation">
<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>

最佳答案

尝试向父设备添加一个 onmouseover 事件和一个额外的 JavaScript 方法来重置子显示状态。

<html>
<head>
<style>
.childAppliance
{
display:none;
}
.parentAppliance:hover .childAppliance
{
display: block;
top: 50px;
left: 130px;
}
</style>
<script type="text/javascript">
function toggle(obj) {
var element = document.getElementById(obj);

if(element.style.display == 'none')
element.style.display = 'block';
else
element.style.display = 'none';
}

function show(obj) {
var element = document.getElementById(obj);
element.style.display = '';
}
</script>
</head>
<body>


<li id="Appliance" itemid="Appliance" class="parentAppliance" role="presentation">
<a href="#/appliance_status.home" hiddentitle="Health" id="A1"
class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title=""
onclick="toggle('ApplianceSubTable');" onmouseover="show('ApplianceSubTable');">

<!--<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>
</body>
</html>

关于html - 通过单击另一个更改 html 标记的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20641781/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com