Question

我已经创建了一个响应式菜单栏遇到了一个问题，当我点击下拉按钮时，根本就没有样式。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rowClick">
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
    <td>Cell</td>
  </tr>
</table>

/**
 * Shuffle implementation for an SplFixedArray.  Like PHP's shuffle(array)
 * function, this randomizes the elements in the supplied array.
 *
 * @param \SplFixedArray $array  The array to shuffle in place
 * @param int $passes Number of passes over each element to randomize
 * @return bool true on success
 */
function shuffle_spl_fixed_array(\SplFixedArray &$array, $passes = 1)
{
    $size = $array->count();

    for ($pass = 0; $pass < $passes; ++$pass) {
        for ($idx = 0; $idx < $size; ++$idx) {
            $swap = mt_rand(0, $size - 1);
            $temp = $array[$swap];
            $array[$swap] = $array[$idx];
            $array[$idx]  = $temp;
        }
    }

    return true;
}

function myFunction(){
  var x = document.getElementById("myMenubar");
  if (x.className === "menubar"){
    x.className += "responsive";
  }else{
    x.className = "menubar";
  }
}

我做错了什么？我正在使用http://www.w3schools.com/howto/howto_js_topnav.asp教程，我改变了一些代码以适合我的设计。我认为基数都是一样的

Answer 1

使用它!!!

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <nav id="menu" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a>
              </li>
              <li><a href="#">Page 1-2</a>
              </li>
              <li><a href="#">Page 1-3</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

Answer 2

您想要更改

x.className += "responsive";

到

x.className += " responsive";

目前，您的课程变为menubarresponsive而不是menubar和responsive。

Answer 3

OK ... 所以我将首先指出错误：

你的CSS中有错误。 .menubar.responsive选择所有类别为 menubar 和响应的元素。
您的javascript中也有错误。 classname属性是一个字符串。因此，x.classname += responsive不会将响应性添加为另一个类，但会将当前的类名与responsive连接起来，因此结果将为menubarresponsive。
您未将myFunction()分配给任何对象。

<强>解决方案

你可以改变你的css，我不会推荐它，因为它是一个漫长的过程，或者改变你的javascript代码。在这里，我将逻辑if语句更改为切换responsive类的简单语句。

＆＃13;

function myFunction() {
  document.getElementById('myMenubar').classList.toggle('responsive');
}

＆＃13;

.menubar{
    position:absolute;
    width:600px;
    margin-left:35%;
    margin-top:4.5%;
}

.menubar ul{
    overflow:hidden;
} 

.menubar ul li{
    display:inline-block;
    margin-right:15%;
    list-style-type:none;
}

.menubar ul li a{
    text-decoration:none;
    color:white;
}

.menubar ul li.icon{display:none;}
.menubar ul li a:hover{color:red;text-decoration:none;}
.menubar ul li a.current{color:red;text-decoration:none;}

@media screen and (max-width:765px){
    .menubar{
        width:130px;
        margin-left:57%;
    }
    .menubar ul li:not(:first-child) {display:none;}
    .menubar ul li.icon{
        float:right;
        display:inline-block;
    }
}

@media screen and (max-width:765px){
    .menubar.responsive ul{position:relative;}
    .menubar.responsive ul li.icon{
        position:absolute;
        right:0;
        top:0;
    }
    .menubar.responsive ul li{
        float: none;
        display: inline;
    }
    .menubar.responsive ul li a{
        text-decoration:none;
        color:white;
        text-align:center;
    }
}

＆＃13;

<div class="menubar" id="myMenubar">
        <ul>
            <li><a href="#" class="current" onclick="myFunction()">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
        </ul>
</div>

＆＃13;

响应式菜单栏使用CSS和Javascript

3 个答案: