0
사용자가 기본 탐색 머리글 위에 마우스를 놓을 때 드롭 다운되는 보조 탐색 기능이 포함 된 사이트에서 작업하고 있습니다. 이 드롭 다운이 '정상'드롭 다운처럼 움직이게하여 클릭하면 사라집니다.클릭시 하위 내비게이션 UL 숨기기
일반적으로 이것은 문제가되지 않지만이 사이트는 보조 탐색에 고정 링크를 사용하기 때문에 드롭 다운이 사용 된 후에도 남아 있습니다. 그 자체가 매우 귀찮은 것이 아니라이지만, 사람들이 일반적으로 드롭 다운이 동작 할 것으로 예상하는 것처럼 더 선호합니다.
불행히도 jQuery/javascript에 대한 나의 능력은 충분하지 않으며, 저는 짧게 설명합니다.
도움을 주시면 감사하겠습니다. 여기
는 Javacript입니다 :ul.nav li ul{
list-style:none;
padding: 0;
margin: 0;
position:absolute;
display: block;
left:-9999px;
}
ul.nav li ul li{
float:none;
padding: 0;
margin: 0;
display: block;
}
ul.nav li ul li a{
white-space: nowrap;
margin: 0;
padding: 0;
display: block;
}
ul.nav li:hover ul{
left:0;
top: 0;
}
function closeList1() {
var list = document.getElementById("list1");
if (list.style.display == "block"){
list.style.display = "none";
}
}
function closeList2() {
var list = document.getElementById("list2");
if (list.style.display == "block"){
list.style.display = "none";
}
}
되는 HTML ...
<ul class="nav">
<li>
<a href="#first" onClick="closeList1">FIRST</a>
<ul class="first" onClick="closeList1" id="list1">
<li><a href="#firstone">ONE</a></li>
<li><a href="#firsttwo">TWO</a></li>
<li><a href="#firstthree">THREE</a></li>
<li><a href="#firstfour">FOUR</a></li>
</ul>
</li>
<li>
<a href="#second" onClick="closeList2">SECOND</a>
<ul class="second" onClick="closeList2" id="list2">
<li><a href="#secondone">ONE</a></li>
<li><a href="#secondtwo">TWO</a></li>
<li><a href="#secondthree">THREE</a></li>
<li><a href="#secondfour">FOUR</a></li>
</ul>
</li>
</ul>
과 CSS ..., 덕분에 그것을 확인하기위한, 그리고에 대한 당신이 줄 수있는 도움.