javascript - 导航栏位置固定禁用其中的所有元素

问题描述

我有一个问题，我花了足够的时间和足够的研究，但没有找到解决方案。在项目旁边，https://github.com/dennismoha/React_Admin_template/tree/issue_branch，我正在改进使用引导程序制作的已经创建的管理仪表板，但现在正在做出反应。问题是，在普通的 html 上，侧边栏运行良好，一切都反应良好且可点击，但是当它反应时，侧边栏中的所有元素都被禁用。链接也不起作用。没有什么是可点击的。我已经浏览了代码，我意识到，在assets/libs/css/style.css1627 上使用 vscode 是页面的自定义 css。.nav-left-sidebar负责其位置的 ' ' 类，在删除 "position:fixed" 使按钮可点击，尽管其他页面响应性丢失并添加它会带来问题。我个人认为这是问题所在。我尝试研究为什么position:fixed这种行为无济于事，我尝试更改为float:left / right和两者都有相同的结果所以我真的要求可能是什么问题。

代码 行：1627 css

.nav-left-sidebar {
    position: fixed;
    width: 264px;
    height: 100%;
    top: 60px;
    overflow: auto;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
    box-shadow: 0px 0px 28px 0px rgba(82, 63, 105, 0.13);
    -webkit-transition: all 0.3s ease;
}

侧边栏的片段示例。

   <div className="nav-left-sidebar sidebar-dark">
          <div className="menu-list">
            <nav className="navbar navbar-expand-lg navbar-light">
              <a className="d-xl-none d-lg-none" href="/#">
                Dashboard
              </a>
              <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="navbar-toggler-icon" />
              </button>

              <div className="collapse navbar-collapse" id="navbarNav">
                <ul className="navbar-nav flex-column">
                  <li className="nav-divider"> Menu</li>
                  <li className="nav-item ">
                    <a
                      className="nav-link active"
                      href="/#"
                      data-toggle="collapse"
                      aria-expanded="false"
                      data-target="#submenu-1"
                      aria-controls="submenu-1"
                    >
                      <i className="fa fa-fw fa-user-circle" />
                      Dashboard <span className="badge badge-success">6</span>
                    </a>
                    <div id="submenu-1" className="collapse submenu" style={{}}>
                      <ul className="nav flex-column">
                        <li className="nav-item">
                          <a
                            className="nav-link"
                            href="#"
                            data-toggle="collapse"
                            aria-expanded="false"
                            data-target="#submenu-1-2"
                            aria-controls="submenu-1-2"
                          >
                            Students
                          </a>
                          <div
                            id="submenu-1-2"
                            className="collapse submenu"
                            style={{}}
                          >
                            <ul className="nav flex-column">
                              <li className="nav-item">
                                <a className="nav-link" href="index.html">
                                  E Commerce Dashboard
                                </a>
                              </li>
                              <li className="nav-item">
                                <a
                                  className="nav-link"
                                  href="ecommerce-product.html"
                                >
                                  Product List
                                </a>
                              </li>
                              <li className="nav-item">
                                <a
                                  className="nav-link"
                                  href="ecommerce-product-single.html"
                                >
                                  Product Single
                                </a>
                              </li>
                              <li className="nav-item">
                                <a
                                  className="nav-link"
                                  href="ecommerce-product-checkout.html"
                                >
                                  Product Checkout
                                </a>
                              </li>
                            </ul>
                          </div>
                        </li>
                 
                      </ul>
                    </div>
                  </li>
                
               
             
                </ul>
              </div>
            </nav>
          </div>
        </div>

我的文件结构的屏幕截图示例

[!file structure enter image description here ] 1

我的 Header.js 的屏幕截图示例，其中包含导航栏，包括侧边栏和其他子属性

[！如何加载侧边栏在此处输入图像描述] 2

加载文件的浏览器结果 [!browser view enter image description here ] 3

注意：我有两个月的反应时间，所以我可能提出了一个问题，这可能是问题所在，我无法弄清楚。

标签： javascripthtmlcssreactjs

javascript - 导航栏位置固定禁用其中的所有元素

问题描述

解决方案

推荐阅读