나는이 혀를 따랐다 :
http://www.falconmasters.com/web-design/menu-desplegable-adaptable-dispositivos-moviles/
하위 메뉴 안에 하위 메뉴를 추가하고 Jquery에 event.stopPropagation을 추가했습니다.
이것은 내 코드입니다
$(document).ready(main);
var contador = 1;
function main() {
$('.menu_bar').click(function() {
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
$('.submenu').click(function(e) {
e.stopPropagation();
$(this).children('.children').slideToggle();
});
}
내 문제는 800px보다 작을 때 잘 토글되지만 두 번째 하위 메뉴가 800px보다 높으면 전혀 응답하지 않는다는 것입니다.
당신이 나를 도울 수 있기를 바랍니다
다음은 HTML입니다.
<header>
<div class="contentWrapper">
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-list2"> </span>Menú</a>
</div>
<nav>
<ul class="level-1">
<!--Parent #1-->
<li>
<a href="#">Home</a>
</li>
<!--Parent #2-->
<li>
<a href="#">Agenda</a>
</li>
<!--Parent #3-->
<li>
<a href="#">Nieuws</a>
</li>
<!--Parent #4-->
<li class="submenu">
<a href="#">Foto's</a>
<ul class="children">
<li>
<a href="#">Chaffee</a>
</li>
<li>
<a href="#">Scoutcar</a>
</li>
<li>
<a href="#">Brencarrier</a>
</li>
<li>
<a href="#">Halftrack</a>
</li>
<li>
<a href="#">Hummer</a>
</li>
<li>
<a href="#">Dodge</a>
</li>
<li>
<a href="#">T34</a>
</li>
<li>
<a href="#">Mig17</a>
</li>
<li>
<a href="#">Willeys</a>
</li>
<li>
<a href="#">Harley</a>
</li>
<li>
<a href="#">Eng. Bikes</a>
</li>
<li>
<a href="#">SD-KZF 251</a>
</li>
<li>
<a href="#">Greyhound</a>
</li>
<li>
<a href="#">Ferret</a>
</li>
<li class="submenu">
<a href="#">Museum 40-45</a>
<ul class="children">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li><a href="#">Grandchild #3</a></li>
<li><a href="#">Grandchild #4</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">Mariniers</a>
<ul class="children">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li><a href="#">Grandchild #3</a></li>
<li><a href="#">Grandchild #4</a></li>
</ul>
</li>
<li class="submenu">
<a href="#">Optochten</a>
<ul class="children">
<li><a href="#">Grandchild #1</a></li>
<li><a href="#">Grandchild #2</a></li>
<li><a href="#">Grandchild #3</a></li>
<li><a href="#">Grandchild #4</a></li>
</ul>
</li>
</ul>
</li>
<!--Parent #5-->
<li>
<a href="#">Films/tv</a>
</li>
<li>
<a href="#">Links</a>
</li>
<li>
<a href="#">Gastenboek</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
그리고 여기 sass입니다.
.menu_bar
display: none
header
width: 100%
nav
background: #023859
z-index: 1000
max-width: 100%
width: 95%
margin: 20px auto
ul
list-style: none
li
display: inline-block
position: relative
&:hover
background: #E6344A
a
color: #fff
display: block
text-decoration: none
padding: 10px
span
margin-right: 10px
&:hover .children
display: block
.children
display: none
background: #011826
position: absolute
width: 250%
z-index: 1000
padding-left: 0px
li
display: block
overflow: hidden
border-bottom: 1px solid rgba(255, 255, 255, 0.5)
a
display: block
span
float: right
position: relative
top: 3px
margin-right: 0
margin-left: 10px
.caret
position: relative
top: 3px
margin-left: 10px
margin-right: 0px
@media screen and (max-width: 800px)
body
padding-top: 80px
.menu_bar
display: block
width: 100%
position: fixed
top: 0
background: #E6344A
.bt-menu
display: block
padding: 20px
color: #fff
overflow: hidden
font-size: 25px
font-weight: bold
text-decoration: none
span
float: right
font-size: 40px
header nav
width: 80%
height: calc(100% - 80px)
position: fixed
right: 100%
margin: 0
overflow: scroll
.level-1
margin-left: 2px
padding-left: 0px
ul li
display: block
border-bottom: 1px solid rgba(255, 255, 255, 0.5)
a
display: block
&:hover .children
display: none
.children
width: 100%
position: relative
li a
margin-left: 5px
.caret
float: right
( 주 나는, 당신이 좋아하는 온라인 계산기를 사용할 수있는 CSS에 말대꾸를 변환 이 일 이 처음이다 : 두 가지 문제가 있습니다 다시 전환) overflow:hidden에 호출되는 :
header nav ul li .children li {
display: block;
/*overflow: hidden;*/ //remove
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
손자 탐색 position: absolute이 부모 외부로 흐르 도록 설정되어 있기 때문에 표시되지 않습니다 . 이 문제를 해결하면 클릭하기 전에 이미 손자 하위 탐색이 표시되는 또 다른 문제가 있습니다. 스타일이 부모로부터 상속되기 때문입니다 (두 클래스 이름 모두 .children). 에 :hover당신이 설정해야 .children의 ul에 display: none. (옆에 표시되도록하려면 left및 top속성도 추가 할 수 있습니다 .)
header nav ul li:hover .children ul {
display: none;
top: 0; //optional
left: 100%; //optional
}
이제 손자 하위 메뉴가 클릭시 토글됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다