이 기사에서는 JS 시뮬레이션 부트 스트랩 드롭 다운 메뉴의 효과에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
부트 스트랩 드롭 다운 메뉴를 시뮬레이션합니다
작업의 효과를 줄이려면 : 내비게이션 바를 클릭하면 다음 메뉴가 나타나지 만 다른 장소를 클릭하면 하위 메뉴가 숨겨지면 부트 스트랩의 "드롭 다운 메뉴"와 약간 유사합니다.
부트 스트랩 하위 메뉴의 스타일은 디자인과 다르기 때문에 비슷한 효과를 직접 작성해야합니다.
컨트롤을 클릭하면 드롭 다운 메뉴가 표시됩니다. 그러나 빈 장소를 클릭하면 어떻게 자동으로 숨겨 질 수 있습니까?
처음에 나는 onclick 이벤트를 몸에 묶었 다. 빈 장소를 클릭하면 이벤트의 버블 링으로 인해 클릭 바디 이벤트가 트리거됩니다. 그러나 문제는 컨트롤을 클릭하면 Body Click 이벤트가 트리거되어 드롭 다운 메뉴가 표시되면 철회 된 후에이 아이디어가 잘못되었다는 것입니다.
Bootstrap 이이 기능을 구현 했으므로 소스 코드를 확인하고 솔루션을 찾았습니다.
문서를 바인딩하고 (하위 메뉴를 숨기십시오) 방법을 트리거 할 때 버블 링으로부터 제어를 방지하고 결합을 트리거하지 못하게합니다.
<!-필터 네비게이션 바-> <div 스타일 = "z-index : 999"> <div> <span onclick = "showorHideItem (this, event)"> category <span> </span> </span> <ul data-show = "heen"style = "z-index : 999;"> <jumpto (this) " target = "https://www.baidu.com"> <span> 하우스 키핑 </span> <span> </span> </span> </span> </li> <li onclick = "jumpto (this)"target = "https://www.baidu.com"> 야채 </span> </span> </span> </span> </span> </span> </span> onclick = "jumpto (this)"target = "https://www.baidu.com"> <span> 스낵 </span> <span> </span> <span> </li> </li> </ul> </div> </div> <div> <div> < "showorHideItem (this, event)"> cate> </span> data-show = "hide"style = "top : 100%; 왼쪽 : 0px; z-index : 999; display : none"> <li onclick = "jumpto (this)"target = "https://www.baidu.com"> <span> hobeeping1 </span> <span> </span> </li> <li> <li> <li> <li> <li> <li. target = "https://www.baidu.com"> <span> betuble> </span> <span> </span> <span> </span> <span> </span> </li> <li onclick = "jumpto (this)"target = "https://www.baidu.com"> snack1 </span>>>> </span>>> </span>>> </ul> </div> </div> <div> <div onclick = "showsearch (this, event)"> <span> </span> </div> <!-show spower search box-> <div> <div style = "top : 58%; 오른쪽 : 0px; z-index : 999; display : none;" data-search = "hide"> <div> <div> <div style = "마진-오른쪽 : 80px;"> <span style = "왼쪽 : 0px; 상단 : 0px;"> </span> <입력 "inclick ="spopevent (this, event) "type ="text "value =" "> <div> <style =" "style ="Padding : "Padding : 12px;">Search</button> </div> </div> </div> </div> </div> </div> </div> </div><script>$(function(){ //Bind the event $(document).on("click",function(){ //Search the control whose control is ul and contains the attribute data-show="show". If there is, let it hide it $ [ul [data-show = 'show']. "div [data-search = 'show']"). css ( "display", "none"). var $ currentObj = $ (obj); // 모든 드롭 다운 목록을 숨기고 $ ( "ul [data-show = 'show']"). // 모든 활성 클래스를 지우십시오 $ currentObj.closest ( ". row"). 찾기 ( "div.Active"). removeClass ( "active"); // 선택한 스타일을 추가하십시오 $ currentObj.closest ( ". float_left"). addClass ( "active") var $ ul = $ currentObj.closest ( "div"). 찾기 ( "ul"); // ul은 ($ ul.data ( "show") == "show") {$ ul.slideup ( "slow"); $ ul.attr ( "데이터 쇼", "숨기기"); } else {// ul은 확장 된 상태 $ ul.slidedown ( "slow")입니다. $ ul.attr ( "data-show", "show"); // 이벤트 중지 버블 이벤트 이벤트 .StOpPropAgation (); }} // 검색 상자 함수 show showsearch (obj, event) {var $ currentObj = $ (obj) .Closest ( ". float_left"). 찾기 ( ". search_cont"). css ( "display", "block"); $ currentObj.animate ({너비 : "100%"}, 1000); $ currentObj.attr ( "data-search", "show"); // 이벤트 중지 버블 이벤트 이벤트 .StoPPropAgation ();} 함수 stopevent (obj, event) {// 이벤트 버블 스톱 event.stopPropAgation ();} </script>JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.