집 > 기사 > 웹 프론트엔드 > JS 구성 요소 부트스트랩은 드롭다운 메뉴 효과 code_javascript 기술을 구현합니다.

JS 구성 요소 부트스트랩은 드롭다운 메뉴 효과 code_javascript 기술을 구현합니다.

WBOY원래의: 2016-05-16 15:03:391560검색

부트스트랩 드롭다운 메뉴 이 장에서는 드롭다운 메뉴에 대해 설명하지만 상호작용 부분은 다루지 않습니다. 이 장에서는 드롭다운 메뉴의 상호작용에 대해 자세히 설명합니다. 드롭다운 플러그인을 사용하면 모든 구성 요소(예: 탐색 모음, 탭 페이지, 캡슐 탐색 메뉴, 버튼 등)에 드롭다운 메뉴를 추가할 수 있습니다.

이 플러그인의 기능을 별도로 참조하려면 dropdown.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

1. 사용법
드롭다운 플러그인의 숨겨진 콘텐츠를 전환할 수 있습니다.

1. 데이터 속성을 통해: 아래와 같이 링크나 버튼에 data-toggle="dropdown"을 추가하여 드롭다운 메뉴를 전환합니다.

<div class="dropdown">
 <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

링크를 그대로 유지해야 하는 경우(브라우저에서 JavaScript를 활성화하지 않을 때 유용함) href="#" 대신 data-target 속성을 사용하세요.

<div class="dropdown">
 <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
  下拉菜单（Dropdown） <span class="caret"></span>
 </a>
 
 
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
 </ul>
</div>

2. 자바스크립트를 통해: 자바스크립트를 통해 드롭다운 메뉴 전환을 호출하려면 다음 방법을 사용하세요.
$('.dropdown-toggle').dropdown()

2. 드롭다운 메뉴의 간단한 예시
일반적인 사용 시 코드는 컴포넌트 메소드와 동일합니다.

//声明式用法

<div class="dropdown">
  <button class="btn btn-primary" data-toggle="dropdown">
     下拉菜单
     <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
     <li><a href="#">首页</a></li>
     <li><a href="#">产品</a></li>
     <li><a href="#">资讯</a></li>
     <li><a href="#">关于</a></li>
  </ul>
</div>

선언적 사용의 핵심 핵심:
1. 주변 컨테이너를 래핑하려면 class="dropdown"을 사용하세요.
2. 내부 클릭 버튼 이벤트 바인딩 data-toggle="dropdown"
3. 메뉴 요소에는 class="dropdown-menu"를 사용하십시오.

//如果按钮在容器外部，可以通过 data-target 进行绑定。

<button class="btn btn-primary" id="btn" data-toggle="dropdown"
data-target="#dropdown">
在 JavaScript 调用中，没有属性，方法并不好用，下面介绍四个基本事件。
//下拉菜单方法，但仍然需要 data-*

$('#btn').dropdown();
$('#btn').dropdown('toggle');

드롭다운 메뉴는 팝업 전, 팝업 후, 닫기 전, 닫기 후에 해당하는 4가지 유형의 이벤트를 지원합니다.

//事件，其他雷同

$('#dropdown').on('show.bs.dropdown', function() {
  alert('在调用 show 方法时立即触发！');
});

3. 탭페이지 드롭다운 메뉴 활용

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 带有下拉菜单的标签页</title>
  <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <script src="/scripts/jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li class="dropdown">
   <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     Java <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
     <li><a href="#">Swing</a></li>
     <li><a href="#">jMeter</a></li>
     <li><a href="#">EJB</a></li>
     <li class="divider"></li>
     <li><a href="#">分离的链接</a></li>
   </ul>
  </li>
  <li><a href="#">PHP</a></li>
</ul>
 
</body>
</html>

렌더링:

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

성명：

이전 기사：부트스트랩 스크롤 모니터링(Scrollspy) 플러그인_javascript 기술에 대한 자세한 설명다음 기사：부트스트랩 스크롤 모니터링(Scrollspy) 플러그인_javascript 기술에 대한 자세한 설명

JS 구성 요소 부트스트랩은 드롭다운 메뉴 효과 code_javascript 기술을 구현합니다.

관련 기사