Изменение стиля тега html, нажав на другой

У меня есть следующий код: parentAppliance является частью основной левой навигационной таблицы и при наведении указателя мыши на «Appliance». Я вижу подтаблицу, содержащую «здоровье». Теперь я хочу, чтобы подтаблица исчезла, когда я нажимаю на здоровье, какие-то мысли?Изменение стиля тега html, нажав на другой

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>

источник

2013-12-17 adelphia

CSS не кликах события. Посмотрите на jQuery или обычный JavaScript. – isherwood

@isherwood CSS действительно может иметь события щелчка через вкладки радио. http://jsfiddle.net/Josh_Powell/UbF9a/ (не сказать, что это самый практичный способ, но это возможно:}) –

Верно, но не об общих элементах, подобных этому, необходимо будет для этого вопроса. – isherwood

Попробуйте добавить 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>

источник

2013-12-17 20:30:12 jim31415

Спасибо jim31415. Я был на полпути через реализацию вашего предложения, и он работает :) Спасибо большое! – adelphia

Использование: активное, чтобы установить отображение обратно на ни одного.

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

http://jsfiddle.net/vXU2t/

источник

2013-12-17 23:01:09 Andrew

Но элемент также исчезает при мыши. – isherwood

Изменение стиля тега html, нажав на другой

ответ

Смежные вопросы