Changing the style of html tag by clicking on another

后端 未结 2 1704
终归单人心
终归单人心 2021-01-26 04:20

I have the following code, the parentAppliance is part of main left nav table and on hovering over \"Appliance\" I see a subtable containing \"health\". Now I want the subtable

相关标签:
2条回答
  • 2021-01-26 04:43

    Use :active to set display back to none.

    .ui-navigation-static-menu-text:active{
        display:none;
    }
    

    http://jsfiddle.net/vXU2t/

    0 讨论(0)
  • 2021-01-26 04:50

    Try adding a onmouseover event to the parent appliance and an additional JavaScript method to reset the child display state.

    <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>
    
    0 讨论(0)
提交回复
热议问题