Question

我有一个响应式下拉导航，在功能方面遇到了很大的打嗝。

基本上，页面将正确加载，一切都会正常工作等。如果我调整页面大小以显示我的移动导航，它将显示我的汉堡包菜单，让我点击并关闭所有工作。 但问题是

如果我去手机，打开它，然后调整大小而不关闭它，导航将保持可见。
如果我去手机，打开它，然后关闭它，然后调整大小，导航将消失。

我包含了一些基本的HTML我的JS功能，以及指向相关网站的链接。

HTML

<div class="navigation">
  <div class="container1">
    <a class="nav-logo" href="index.html"><img src="img/logo.svg"></a>
    <div class="mobile">
      <ul class="menu nav-left">
        <a href="html/main-pages/portfolio.html"><li class="button">Work</li></a>
        <a href="html/main-pages/resume.html"><li class="button">Resume</li></a>
        <a href="html/main-pages/contact.php"><li class="button">Contact</li></a>
      </ul>

      <ul class="menu nav-right">
        <a href="#"><li class="button"><i class="fa fa-twitter"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-codepen"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-linkedin"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-behance"></i></li></a>
        <a href="#"><li class="button"><i class="fa fa-github"></i></li></a>
      </ul>
    </div>

    <span class="nav-toggle"><a href="#"><i class="fa fa-bars"></i></a></span>
  </div>
</div>

JS

 $( document ).ready(function(){
        $(".nav-toggle").click(function(){
        $(".mobile").slideToggle(500);

        });
});

最后但并非最不重要的是，您可以在 this website 上找到问题。感谢大家的帮助，如果有任何问题，我很乐意回答。

以下是 jsfiddle

以供日后参考

Answer 1

这是因为在移动设备上关闭菜单时，.mobile将显示无显示。这可以通过!important修复。

@media { /* your desktop media query */
  .mobile {
    display: block !important;
  }
}

Answer 2

{
    xtype: 'datefield',
    name: 'order_date',
    emptyText: '',
    fieldLabel: 'Order Date',
    hideLabel: true,
    allowBlank: true,
    margins: '0 10 0 10',
    format:'d/m/Y',
    submitFormat:'Y-m-d',
    value: '',
    maxValue: new Date(),
    listeners:{
        render: function(cmp, eOpts){
            //this.triggerCell.hide();
            cmp.inputCell.on("click",function(){  
                cmp.onTriggerClick();
            });
        }
    }
}

调整大小后，响应式导航会消失吗？

2 个答案: