Question

我现在已经查看了这个代码大约十次了，而且我似乎无法在移动设备上使导航栏正常工作。当我点击它时，它就无法工作。

编辑：我们正在使用React将导航栏渲染到页面。添加了整个JS文件，以便您查看。

＆＃13;

var NavLoggedIn = React.createClass({

      render: function() {
          return (



              //  <div className ="navcontainer">
              //         <nav> 
              //         <a href='/index'>Index</a>
              //             <a href='/pod-search'>POD Search</a>
              //              <a href='/book-now'>Book Now</a>
              //               <a href='/current-bookings'>Current Bookings</a>
              //             <a href='/historic-bookings'>Historic Bookings</a>
              //             <a href='/contact-us'>Contact Us</a>
              //             <a href='/pod-profile'>pod profile</a>
              //             <a href='/my-profile'>My profile</a>
              //             <a href='/login'>Log In</a>
              //         </nav>
              //     </div>



              < nav className = "navbar-fixed-top  navbar-inverse"
              id = "navColor" >
              < div className = "container-fluid" >
              < div className = "navbar-header" >
              < button type = "button"
              className = "navbar-toggle collapsed"
              data - toggle = "collapse"
              data - target = "#navbar"
              aria - expanded = "false"
              aria - controls = "navbar" >
              < span className = "icon-bar" > < /span>
            <span className="icon-bar"></span >
              < span className = "icon-bar" > < /span>
          </button >
              < /div>
        <div id="navbar" className="collapse navbar-collapse" >
          <ul className="nav navbar-nav" id="center myNavbar">
            <li id="color" ><a href='/my - profile ' id="color">My Profile</a> </li>
            <li><a href=' / pod - search ' id="color">POD Search</a></li>
            <li><a href=' / current - bookings ' id="color">Current Bookings</a> </li>
            <li><a href=' / historic - bookings ' id="color">Historic Bookings</a></li>
            <li><a href=' / contact - us ' id="color">Contact Us</a> </li>
            <li><a href=' / index ' id="color">Log Out</a> </li>
          </ul>
        </div>
      </div>
    </nav>
    
    
            )}
        });
        
var NavLoggedOut = React.createClass({
    
    render: function() {
    return (
    
        <div className ="navcontainer">
            <nav> 
                <a href=' / pod - search '>POD Search</a>
                <a href=' / contact - us '>Contact Us</a>
                <a href=' / login '>Log In</a>
                <a href=' / pod - profile '>pod profile</a>
            </nav>
        </div>
    
            )}
        });
  var logged = true;
if (logged) {
    ReactDOM.render(<NavLoggedIn />, document.getElementById('
              navbar '));
} else {
    ReactDOM.render(<NavLoggedOut />, document.getElementById('
              navbar '));
}

＆＃13;

当我点击汉堡包按钮这么多次导航栏消失时。

任何人都可以帮我吗？

Answer 1

当我切换数据目标字段时，我遇到了同样的问题并为我工作。请尝试使用它。

<nav class="navbar-fixed-top  navbar-inverse" id="navColor">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav" id="center myNavbar">
    <li id="color"><a href='/my-profile' id="color">My Profile</a> 
    </li>
    <li><a href='/pod-search' id="color">POD Search</a>
    </li>
    <li><a href='/current-bookings' id="color">Current Bookings</a> 
    </li>
    <li><a href='/historic-bookings' id="color">Historic Bookings</a>
    </li>
    <li><a href='/contact-us' id="color">Contact Us</a> 
    </li>
    <li><a href='/index' id="color">Log Out</a> 
    </li>
  </ul>
</div>

Bootstrap导航栏在移动设备上无法正常工作

1 个答案: