製作通過點擊使用CSS

Question

下拉菜單中我使用點擊下拉菜單，AJAX的一個簡單的例子：

http://jsfiddle.net/dmitry313/1s62x8hc/2/

HTML：

<a href="javascript:void(0);" class="dropmenu">Dropdown menu</a> 
<ul style="display:none"> 
    <li><a href="#">Dropdown link 1</a></li> 
    <li><a href="#">Dropdown link 2</a></li> 
</ul> 

SCRIPT：

$(document).ready(function() { 
     var click = function() { 
      var divObj = $(this).next(); 
      var nstyle = divObj.css("display"); 
      if (nstyle == "none") { 
       divObj.slideDown(false, function() { 
        $("html").bind("click", function() { 
         divObj.slideUp(); 
        }); 
       }); 
      } 
     }; 
     $(".dropmenu").click(click); 
    }); 

是否可以使用CSS創建相同的腳本？

編輯：更新的鏈接

Answer 1

可以觸發css點擊使用黑客！

使用複選框！

樣品：

 ul{ 
 
      display: none; 
 
     } 
 
     #checkbox{ 
 
      opacity: 0; 
 
     } 
 
     #checkbox:checked + ul { 
 
      
 
      display: block; 
 
     }

<div class="container"> 
 
     <label for="checkbox">Dropdown menu</label> 
 
     <input id="checkbox" type="checkbox" />   
 
     <ul> 
 
      <li><a href="#">Dropdown link 1</a></li> 
 
      <li><a href="#">Dropdown link 2</a></li> 
 
     </ul> 
 
    </div>

您可以使用轉換動畫節目的隱藏效果:) 這只是一個很簡單的例子！

提及：如果你需要舊版瀏覽器的支持，這是一個CSS3黑客，這是行不通的。

Answer 2

沒有，你需要至少三個一行JavaScript。

Answer 3

據我所知你不能有一個onClick方法或類似的CSS。

Answer 4

純HTML/CSS解決方案使用HTML嵌套列表 - 仍然需要JS的幾行，以使它的onclick

http://jsfiddle.net/t1zw41ep/2/

<nav> 
<ul> 
    <li><a href="#">Dropdown Menu</a> 

     <ul> 
      <li><a href="#">Dropdown Link 1</a> 

      </li> 
      <li><a href="#">Dropdown Link 2</a> 

      </li> 
     </ul> 
    </li> 
</ul> 
</nav> 

參見：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu