js 전단 인터페이스 탐색 표시 줄 드 롭 다운 목록 구현

본 논문 의 사례 는 js 가 전단 인터페이스 네 비게 이 션 바 드 롭 다운 목록 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
성과 도 를 먼저 보 겠 습 니 다.

html 코드:

<nav>
<ul class="nav">
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 145px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
<li class="dropDowm">
<a href="javascript:;" class="dropdown-toggle">
   
</a>
<ul class="dropdown-menu" style="display: none;height: 116px;padding-top: 0px;margin-top: 0px;padding-bottom: 0px;margin-bottom: 0px;">
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<li><a href="#" >  </a></li>
<div class="ulbg"></div>
</ul>
</li>
</ul>
</nav>

css 코드:

nav {
background-color: #efe5e5;
width: 77%;
}

.nav{
height: 50px;
width: 100%;
display: flex;
}

.nav .dropDowm{
float: left;
width: 14%;
list-style: none;
}

.nav .dropDowm>a{
text-decoration: none;
margin: 12px;
line-height: 3;
}

.nav .dropDowm .dropdown-menu{
background-color: #848d9e;
}

.nav .dropDowm .dropdown-menu>li{
list-style: none;
display: block;
}
.nav .dropDowm .dropdown-menu>li>a{
text-decoration: none;
display: block;
font-size: 16px;
line-height: 28px;
}

가장 중요 한 것 은 js 코드 를 이용 하여 js 코드 를 제어 하 는 것 이다.

$(function(){
$('.nav .dropDowm').hover(function(e) {
$(this).find('ul').stop().slideToggle();
});
});

간단 한 소개:
slideToggle()방법 은 미끄럼 효과(고도 변화)를 사용 하여 요소 의 보 이 는 상 태 를 전환 합 니 다.
선택 한 요소 가 보 이 는 경우 이 요 소 를 숨 깁 니 다.선택 한 요소 가 숨겨 져 있 으 면 이 요 소 를 표시 합 니 다.
실행 중 나타 나 면(F12 보기):

머리 에 jquery 의 js 파일 을 추가 하면 됩 니 다.
예 를 들 어 이것 은 작은 js 디 렉 터 리 에 있 는 것 이 니 다운로드 하고 도입 하 는 것 을 잊 지 마 세 요.

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.