如何更改onclick的可見性

您好我是Javascript的新手，因爲沒有onclick爲CSS我需要一點幫助。如何更改onclick的可見性

這是我的html：

<div id="dropnav"> 
    <ul> 
     <li><a>Navigation</a> 
      <ul> 
       <li><a href="index.html">Home</a> 
       </li> 
       <li><a href="Paintings.html">Paintings</a> 
       </li> 
       <li><a href="Contact.html">Contact</a> 
       </li> 
       <li><a href="Bio.html">Bio</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

，這是我的CSS：

#dropnav { 
position:relative; 
z-index:100; 
top:-60px; 
left:18%; 
background-size:18%; 

} 
#dropnav ul { 
padding:0px; 
margin:0px; 

} 

#dropnav ul li { 
display:inline; 
float:left; 
width:68.5%; 
list-style-type:none; 
border-style:solid; 
border-width:1px; 
font-family:arial; 
height:50px; 

} 

#dropnav ul li a { 
background-color:#808080; 
color:#FFFFFF; 
text-decoration:none; 
line-height:50px; 
display:block; 
padding-left:36.2%; 
width:63.8%; 
} 

#dropnav ul li a:hover { 
background-color:#666666; 
} 

#dropnav ul li ul li { 
width:99.8%; 

} 
#dropnav ul li ul li a{ 
background-color:#666666; 
} 
#dropnav ul li ul li a:hover { 
background-color:#333333; 

} 

#dropnav ul li ul { 
visibility:hidden; 
} 

#dropnav ul li:onclick ul { 
visibility:visible; 
}

現在我需要的：的onclick工作，所以，如果你能解決它，將是巨大的。感謝您的幫助

來源

2013-12-16 user3105940

是否要在按下鼠標時使元素可見？或者你想切換可見性 –

是的，我想讓元素點擊時可見 – user3105940

試試這個：

$('#dropnav ul li').click(function() { 
    $(this).parent().css('visibility','visible'); 
})

來源

2013-12-16 03:52:12 Felix

這需要有jQuery。 – user3103692

他們標記了jQuery –

一種方法的onclick改變能見度通過添加事件屬性，你的HTML標籤：

onclick="this.style.visibility='hidden';"

例如，這裏是你的導航欄隨着消失的鏈接：

<div id="dropnav"> 
    <ul> 
     <li><a>Navigation</a> 
      <ul> 
       <li><a href="index.html" onclick="this.style.visibility='hidden';">Home</a> 
       </li> 
       <li><a href="Paintings.html" onclick="this.style.visibility='hidden';">Paintings</a> 
       </li> 
       <li><a href="Contact.html" onclick="this.style.visibility='hidden';">Contact</a> 
       </li> 
       <li><a href="Bio.html" onclick="this.style.visibility='hidden';">Bio</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div>

來源

2013-12-16 03:52:13 bitoffdev

放棄這個（這是沒用的）：

#dropnav ul li:onclick ul { 
    visibility:visible; 
}

補充一點：

#dropnav ul li.open ul { 
    visibility:visible; 
}

JS：

$('#dropnav ul li').click(function(){ 
    $(this).addClass('open'); 
});

只要添加一個類，它可以在純CSS進行進一步處理。這樣你的申請就不會受到任何嚴格的法律的約束。

來源

2013-12-16 03:56:35

你可以通過濫用：not僞類來做到這一點純css3。例如，您可以在onclick發生後觸發動畫。

<a href="#" id="btn" onclick="return false">Click</a> 

<style> 
    #btn:not(:active) { 
     /* now keep red background for 1s */ 
     transition: background-color 1000ms step-end; 
    } 

    #btn:active { 
     background: red; 
    } 
</style>

試試吧 - http://jsfiddle.net/WG4Sf/

這裏是CSS click事件的好文章，如果你要使用它們。 http://www.vanseodesign.com/css/click-events/

來源

2013-12-16 04:12:27 synapze

你可以做這樣的事情

<html> 
<head> 
<script type="text/javascript"> 
function change() 
{ 
document.getElementById("d").style.visibility="hidden"; 
} 
</script> 
</head> 
<body> 
<a href="#" onclick="change();">Click Me</a><br/> 
<div id="d">This is just example</div> 
</body> 
</html>

來源

2013-12-16 04:34:31

嘗試。

:active是烏爾需要CSS屬性

WORKING SAMPLE

我剛換了visibility屬性爲我的舒適。你可以改變它到你需要的東西。

來源

2013-12-16 09:05:31

如何更改onclick的可見性

回答

相關問題