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中，覆蓋懸停事件並保持子級隱藏。 另外，附加一個點擊事件，並向其顯示子項：

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並加以改進

菜鳥 ：請問您是否不了解它的工作原理

Answer 2

最好的方法是使用JavaScript。 我建議使用jQuery框架，它使它變得容易得多。 這是一個很好的起點：

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