HTML / CSS / DropDown onClick изменение

Question

Я студент, работаю над идеей, я нашел раскрывающееся меню с открытым исходным кодом, которое я хотел бы изменить.

Я хотел бы изменить его так, чтобы вместо показа его дочерних элементов при наведении курсора они отображались при нажатии. Это возможно? Или кто-нибудь знает подобное решение с открытым исходным кодом?

Вот код: Слишком много строк для размещения HTML, поэтому вот URL http://notimefortime.com/index.txt

#menuh-container
{
        position: absolute;     
        top: 1em;
        left: 1em;
}

#menuh
{
    font-size: 10px;
    font-family: arial, helvetica, sans-serif;
    width:100%;
    float:left;
    margin:2em;
        margin-top: 1em;
}

#menuh a
{
    text-align: center;
    display:block;
    border: 1px solid #0040FF;
    white-space:nowrap;
    margin:0;
    padding: 0.3em;
}

#menuh a:link, #menuh a:visited, #menuh a:active    
{
    color: white;
    background-color: #0040FF;      
    text-decoration:none;
}

#menuh a:hover                      
{
color: white;
background-color: #668CFF;  
text-decoration:none;
}   

#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all    top-parents */
{
    background-image: url(navdown_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
 }

#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */
{
    background-image: url(nav_white.gif);
    background-position: right center;
   background-repeat: no-repeat;
}

#menuh ul
{
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:20em; 
}

#menuh li
{
    position:relative;
    min-height: 1px;        
    vertical-align: bottom;     
}

#menuh ul ul
{
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
    top:0;
    left:100%;
}

div#menuh li:hover
{
    cursor:pointer;
    z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{
    display:none;
}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{
    display:block;
 }

Answer 1

номер

В настоящее время вы используете псевдо-селектор CSS :hover, который отображает дочернего элемента, когда родитель находится над ним. Есть псевдоселектор :active, который срабатывает только если вы удерживаете кнопку мыши на элементе, но это явно не то, что вы хотите.

Чтобы меню появлялось при нажатии, вам понадобится JavaScript. Однако, если пользователь просматривает с отключенным Javascript, вы захотите вернуться к технике наведения CSS. Итак, начнем с некоторого базового HTML / CSS, подобного тому, что у вас есть:

HTML:

  <ul id="menu">
    <li>
        Some Link
        <ul>
          <li>A</li>
          <li>B</li>
        </ul>
    </li>
    <li>
        Some Link 2
        <ul>
          <li>1</li>
          <li>2</li>
        </ul>
    </li>
  </ul>

CSS:

 #menu li ul {
    display:none; 
  }
  #menu li:hover ul {
    display:block; 
  }

Затем в JavaScript переопределяет событие hover и скрывает дочерние элементы. Также прикрепите событие клика и покажите дочернему элементу следующее:

Javascript:

 window.onload = function() {
  var menu = document.getElementById("menu"), //get the menu
    i = 0;
  //get the <li>s
  var parents = menu.children;
  for(i=0;i<parents.length;i++) {
    //override the hover event
    parents[i].onmouseover = function() {
      //hide the first child (which, in this specific case,
      //is the <ul> that we're looking for)
      //if you want to hide more children, you could
      //loop through and hide them all, etc.
     this.children[0].style.display = "none";
    };
    //on click, 
    parents[i].onclick = function() {
      //show the first child if it's hidden
      //hide if it's visible
     var c = this.children[0];
      c.style.display = c.style.display === "none" ? "block" : "none";
    };
  }

};

Вы можете увидеть пример здесь: http://jsbin.com/ifuvuw/2/edit

Обратите внимание:

Это не относится к вашим вложенным меню. Это простой пример. Вы можете взять основной принцип и применить его к вашему делу. Если у вас есть какие-либо вопросы о том, как это работает, пожалуйста, задавайте, но если у вас возникли проблемы с его применением, подумайте над тем, чтобы задать новый вопрос.

TL; DR: Вы не можете сделать это с помощью CSS, но вы можете сделать это с помощью Javascript

Плюсы : пожалуйста, настройте мой (возможно дерьмовый) JS и улучшите его

Noobs : пожалуйста, спросите, если вы не понимаете, как это работает

Answer 2

Лучший способ сделать это - использовать JavaScript. Я бы порекомендовал использовать фреймворк jQuery, он делает его намного проще. Вот хорошая отправная точка:

http://api.jquery.com/click/