w3.css topnav 在小屏幕上答案

【问题标题】：w3.css topnav on small screenw3.css topnav 在小屏幕上
【发布时间】：2017-01-24 17:33:55
【问题描述】：

在小屏幕上，topnav 导航必须点击两次才能打开。我无法弄清楚是什么问题。我当然想实现当用户单击顶部导航打开的图标并显示其余按钮（在一行中）时的状态。我必须始终在顶部导航中使用搜索输入字段。

<!--MAIN NAVBAR-->
<ul class="topnav w3-card-4" id="myTopnav">
<div class="w3-content">
<li class="w3-hide-small"><a href="./index-w3.php"><i class="fa fa-home" title="úvodní strana"></i></a>
  <li>
  <div class="w3-container" id="searchbar">
  <div class="w3-row">
  <form class="w3-container" action="search-w3.php?action=find&amp;list_kind=users" method="post" name="form1">
  <div class="w3-col s10 m10 l10"><input type="text" name="search_string" id="search_string" class="w3-input w3-border-right w3-hover-border-red" placeholder="Vyhledej.."> </div>
  <div class="w3-col s2 m2 l2"><button class="w3-btn w3-white" style=" padding: 8px 16px!important;"><i class="fa fa-search w3-text-hvalur-color"></i></button></div>
  </form>
  </div>
  </div>
  </li>
   <li class="small-right"><a href="javascript:void(0)" onclick="w3_open_keyboard()"><i class="fa fa-keyboard-o"></i></a></li>
  <li class="w3-right" style="cursor:pointer;"><a href="javascript:void(0)" onclick="document.getElementById('id01').style.display='block'"><i class="fa fa-sign-in" title="login"></i></a></li>
  <li class="w3-right"><a href="javascript:void(0)" onclick="w3_open_language()"><i class="fa fa-globe" title="jazyk"></i></a></li>
  <li class="w3-right"><a href="javascript:void(0)" onclick="w3_open()">menu <i class="fa fa-caret-down"></i></a></li>
    <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>
</div>

Please see the whole code on the fiddle

【问题讨论】：

您有一些不匹配的开始/结束标签。请更正这些。在这里更正了 jsfiddle：jsfiddle.net/yeasirA/y3k4bnbs

标签： javascript html css w3.css

【解决方案1】：

问题是您的 topnav 列表有 2 个类 topnav 和 w3-card-4 但您的 javascript 点击只检查 topnav。

这是一个有效的小提琴：http://jsfiddle.net/xrakxv5p/

因此，如果您想根据您的小提琴进行简单修复，请将您的切换功能更改为此。

function myFunction(e) {
    var x = document.getElementById("myTopnav");

    if (x.className === "topnav w3-card-4") {
        x.className += " responsive";
    } else {
        x.className = "topnav w3-card-4";
    }
}

【讨论】：