响应式导航越来越跳跃显示柔性

所以，我试图重新修改我以前的项目，并将其更改为flex。因为ul元素是块，我把它改成使用JavaScript来显示flex。响应式导航越来越跳跃显示柔性

这是小提琴

$(function() { 
 
    var pull  = $('#pull'); 
 
     menu  = $('nav ul.clearfix'); 
 
     menuHeight = menu.height(); 
 
    
 
    $(pull).on('click', function(e) { 
 
     e.preventDefault(); 
 
\t \t $('#burger').toggleClass('open'); 
 
\t \t if ($('#burger').hasClass("open")) { 
 
\t \t \t $(menu).css("display", "flex"); 
 
\t \t \t $("section").css("z-index", 1); 
 
\t \t \t menu.slideToggle(); 
 
\t \t } else { 
 
\t \t \t menu.slideToggle('slow', function() { 
 
\t \t \t $("section").css("z-index", 4); 
 
\t \t \t }); 
 
\t \t } 
 
    }); 
 
}); 
 
$(window).resize(function(){ 
 
    var w = $(window).width(); 
 
    if(w > 320 && menu.is(':hidden')) { 
 
     menu.removeAttr('style'); 
 
    } 
 
});

header{ 
 
width:100%; 
 
position:relative; 
 
display:flex; 
 
align-items:center; 
 
justify-content:center; 
 
flex-direction:row; 
 
} 
 
header #logo{ 
 
width:15%; 
 
position:absolute; 
 
top:0; 
 
left:0; 
 
z-index:2; 
 
} 
 
#logo img{ 
 
width:100%; 
 
} 
 
header nav{ 
 
width:100%; 
 
position:relative; 
 
z-index:1; 
 
} 
 
nav ul.clearfix{ 
 
width:100%; 
 
padding:0; 
 
display:flex; 
 
flex-direction:row; 
 
align-items:center; 
 
justify-content:center; 
 
} 
 
ul.clearfix a{ 
 
list-style:none; 
 
text-decoration:none; 
 
border:solid 2px #e74c3c; 
 
padding:8px 0px; 
 
width:12%; 
 
max-width:300px; 
 
font-size:15px; 
 
color:#e74c3c; 
 
text-align:center; 
 
cursor:pointer; 
 
transition:all 0.3s ease-in-out; 
 
} 
 
ul.clearfix a:nth-child(n+2){ 
 
margin-left:-1px; 
 
} 
 
ul.clearfix a:hover{ 
 
padding:16px 0px; 
 
text-decoration:none; 
 
color:#e74c3c; 
 
cursor:pointer; 
 
} 
 
ul.clearfix #currentPage{ 
 
padding:16px 0px; 
 
text-decoration:none; 
 
color:#e74c3c; 
 
cursor:pointer; \t 
 
} 
 

 
/*default*/ 
 
@media screen and (max-width: 768px) { \t 
 
header{ 
 
\t height:50px; 
 
\t justify-content:flex-start; 
 
} 
 
nav { 
 
\t z-index:2; 
 
\t position:absolute; 
 
\t top:0; 
 
\t left:0; 
 
\t right:0; 
 
\t width:100%; 
 
\t height:50px; 
 
\t border-bottom: 0; 
 
\t } 
 
nav a#pull{ 
 
\t line-height:50px;} 
 
nav ul.clearfix { 
 
\t width:100%; 
 
\t display: none; 
 
\t height: auto; 
 
\t background:#ccc; 
 
\t position:relative; 
 
\t flex-direction:column; 
 
\t z-index:2; 
 
} 
 
ul.clearfix a{ 
 
\t border-bottom:1px dotted black; 
 
\t font-size:14px; 
 
\t width:100%; 
 
\t position:relative; 
 
\t height:50px; 
 
\t text-align:center; 
 
\t z-index:2; 
 
} 
 
ul.clearfix a:first-child{ 
 
\t border-top:1px dotted black; \t \t 
 
\t margin-top:50px; 
 
} 
 
nav a#pull { 
 
\t display: flex; 
 
\t position: absolute; 
 
\t align-items:flex-start; 
 
\t justify-content:flex-start; 
 
\t padding-left:10px; 
 
\t right:10px; 
 
\t top:5px; 
 
} 
 
nav a#pull:after { 
 
\t background:#ccc; 
 
\t width: 30px; 
 
\t height: 30px; 
 
\t display: inline-block; 
 
\t position: absolute; 
 
\t line-height:50px; 
 
\t right:15px; 
 
\t top:0px;} 
 

 
div#burger{ 
 
\t width:20px; 
 
\t height:20px; 
 
\t position: absolute; 
 
\t right:0px; 
 
\t top:0px; 
 
\t -webkit-transform: rotate(0deg); 
 
\t -moz-transform: rotate(0deg); 
 
\t -o-transform: rotate(0deg); 
 
\t transform: rotate(0deg); 
 
\t -webkit-transition: .5s ease-in-out; 
 
\t -moz-transition: .5s ease-in-out; 
 
\t -o-transition: .5s ease-in-out; 
 
\t transition: .5s ease-in-out; 
 
\t cursor: pointer; 
 
\t z-index:4;} 
 
div#burger span{ 
 
\t display: block; 
 
\t position: absolute; 
 
\t height: 5px; 
 
\t width: 100%; 
 
\t background: red; 
 
\t border-radius: 9px; 
 
\t opacity: 1; 
 
\t left: 0; 
 
\t -webkit-transform: rotate(0deg); 
 
\t -moz-transform: rotate(0deg); 
 
\t -o-transform: rotate(0deg); 
 
\t transform: rotate(0deg); 
 
\t -webkit-transition: 0.8s ease-in-out; 
 
\t -moz-transition: 0.8s ease-in-out; 
 
\t -o-transition: 0.8s ease-in-out; 
 
\t transition: 0.8s ease-in-out; 
 
\t } 
 
#burger span:nth-child(1){top: 0px;} 
 
#burger span:nth-child(2){top: 7px;} 
 
#burger span:nth-child(3){top: 14px;} \t 
 

 
#burger.open span:nth-child(1){ 
 
    top: 7px; 
 
    -webkit-transform: rotate(135deg); 
 
    -moz-transform: rotate(135deg); 
 
    -o-transform: rotate(135deg); 
 
    transform: rotate(135deg); 
 
} 
 

 
#burger.open span:nth-child(2){ 
 
    opacity: 0; 
 
    left: -30px; 
 
} 
 

 
#burger.open span:nth-child(3){ 
 
    top: 7px; 
 
    -webkit-transform: rotate(-135deg); 
 
    -moz-transform: rotate(-135deg); 
 
    -o-transform: rotate(-135deg); 
 
    transform: rotate(-135deg); 
 
} 
 

 

 
} 
 

 
/*default Portrait*/ 
 
@media screen and (max-width: 773px) and (orientation: portrait) { 
 
div#logo{ 
 
\t width:30%; 
 
} 
 

 
} 
 
/* iPad Portrait */ 
 
@media only screen 
 
    and (min-device-width: 768px) 
 
    and (max-device-width: 1024px) 
 
    and (orientation: portrait) 
 
    and (-webkit-min-device-pixel-ratio: 1) { 
 

 
div#logo{ 
 
\t width:20%;} 
 
\t 
 
} 
 

 
/* iPad Landscape */ 
 
@media only screen 
 
    and (min-device-width: 768px) 
 
    and (max-device-width: 1024px) 
 
    and (orientation: landscape) 
 
    and (-webkit-min-device-pixel-ratio: 1) { 
 
header{ 
 
\t width:100%; 
 
\t height:80px; 
 
} 
 
div#logo { 
 
width: 25%;} 
 
nav { 
 
width: 65%;} 
 
} 
 

 
/*default Landscape*/ 
 
@media screen and (max-width: 773px) and (orientation: landscape) { 
 
div#logo{ 
 
\t width:20%; 
 
} \t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <header class="sameThisHeight"> 
 
\t \t <div id="logo" class="logo"> 
 
\t \t \t <img src="assets/Logo.png"> 
 
\t \t </div> 
 
\t \t <nav class="clearfix"> 
 
\t \t <ul class="clearfix"> 
 
\t \t \t <a id="currentPage" href="index.php">HOME</a> 
 
\t \t \t <a href="registration.php">REGISTRATION</a> 
 
\t \t \t <a href="tutorial.php">TUTORIAL</a> 
 
\t \t \t <a href="contact.php">CONTACT US</a> 
 
\t \t </ul> 
 
\t \t <a href="#" id="pull"> 
 
\t \t \t <div id="burger"> 
 
\t \t \t \t <span></span> 
 
\t \t \t \t <span></span> 
 
\t \t \t \t <span></span> 
 
\t \t \t </div> 
 
\t \t </a> 
 
\t \t </nav> 
 
\t </header>

的事情是，

当我试图点击汉堡在第一次的来回像它有什么毛病它。

第二次我打开汉堡，它崩溃的导航，它做得很好，不，不是不好，实际上它不是很好。

不知怎的，序列已经改变了打开导航的“x”按钮和关闭导航的“汉堡图标”。它肯定不好。

我不知道我做了什么这样的错误，正确的事情应该到位是我做了关闭导航和“汉堡图标”打开的“x”按钮的相反导航。

我的想法是，因为我插这在我的JavaScript

$(menu).css("display", "flex");

因为，我加入到这个我的JavaScript之前它没有良好的表现，但还不够好，以配合设计。最后一个项目我做得很好，因为没有使用flex，并且使用UL LI标签进行直接测试。无论如何要解决这个问题，并继续使用Flex的呢？请帮忙。

来源

2017-01-02 Obink

此行首次单击时会导致此问题。你应该把display: flex放在slideToggle();之后，我应该指出它不会像slideToggle();把display: block;那样平稳过渡。你也许应该做一个css解决方案，或者在<ul>...</ul>附近制作一个容器。

if ($('#burger').hasClass("open")) { 
    //here you set it to be display 
    $(menu).css("display", "flex"); 

    $("section").css("z-index", 1); 

    //here you toggle display, which will be flex, so you hide it 
    menu.slideToggle(); 
}

变化（fiddle，我改变你的造型有点用于演示，您可以自由使用你自己的）

$(function() { 
    var pull = $('#pull'); 
    menu = $('nav ul.clearfix'); 
    menuHeight = menu.height(); 

    $(pull).on('click', function(e) { 
    e.preventDefault(); 
    $('#burger').toggleClass('open'); 
    if ($('#burger').hasClass("open")) { 
     $("section").css("z-index", 1); 
     menu.slideToggle(); 
    } else { 
     menu.slideToggle('slow', function() { 
     $("section").css("z-index", 4); 
     }); 
    } 
    }); 
}); 
$(window).resize(function() { 
    var w = $(window).width(); 
    if (w > 320 && menu.is(':hidden')) { 
    menu.removeAttr('style'); 
    } 
});

你的HTML/CSS有一些问题，应重新加工。的<ul>必须包含<li>

<ul class="clearfix"> 
    <a id="currentPage" href="index.php">HOME</a> 
    <a href="registration.php">REGISTRATION</a> 
    <a href="tutorial.php">TUTORIAL</a> 
    <a href="contact.php">CONTACT US</a> 
</ul>

应该

<ul class="clearfix"> 
    <li><a id="currentPage" href="index.php">HOME</a></li> 
    <li><a href="registration.php">REGISTRATION</a></li> 
    <li><a href="tutorial.php">TUTORIAL</a></li> 
    <li><a href="contact.php">CONTACT US</a></li> 
</ul>

而且你为什么要使用类clearfix当你不使用浮动？我从来没有将clearfix类作为这种情况下的样式，而是给它一类navigation或其他东西。

来源

2017-01-02 08:25:17

thx为你的关注@dejan这是我真正想要的，所以我们不能改变那slideToggle到显示器的flex？如果我们为ul标签添加另一个换行，则会更长一些，而且我认为您的li标签没有必要。 – Obink

还有一件事@dejan，关于ul类的clearfix，这个类名可以改变什么？我说的是，它只是一个类名和类内的属性，它本身就是我们真正想要的类型不是？或者一个“clearfix类”有一个独立的属性，我不知道。 – Obink

@Obink否，'slideToggle（）'将元素设置为'display：block;'，目前没有办法改变它。 –

响应式导航越来越跳跃显示柔性

回答

相关问题