无法在我的侧边栏中展开菜单项以做出反应

Posted 2023-03-06

【中文标题】无法在我的侧边栏中展开菜单项以做出反应

【英文标题】：Having trouble uncollapsing a menu item in my sidebar in react

【发布时间】：2021-06-18 18:45:01

【问题描述】：

我有一个侧边栏，其中包含一些项目，其中两个项目是可折叠的项目，称为“菜单”和“页面”。这些项目应该在点击时折叠和展开，但由于某种原因我无法做到这一点。

这是我的代码：

    import React from "react";
    import Flower from "../../Images/flower.png";
    import "./SideBar.css";
    import $ from "jquery";


    class SideBar extends React.Component 

    componentDidMount () 
        $(document).ready(function () 
            $('#sidebarCollapse').on('click', function () 
                $('#sidebar').toggleClass('active');
            );
        );
    

  render () 
    return (
    <div>
        <div className="wrapper">
            <nav id="sidebar">
                <div className="sidebar-header">
                <h3>`Bootstrap Sidebar`</h3>
                <strong>BS</strong>
                </div>

                <ul className="list-unstyled components">
                    <li className="active">
                        <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
                            <i className="fas fa-home"></i>
                            Home
                        </a>
                        <ul className="collapse list-unstyled" id="homeSubmenu">
                            <li>
                                <a href="#">Home 1</a>
                            </li>
                            <li>
                                <a href="#">Home 2</a>
                            </li>
                            <li>
                                <a href="#">Home 3</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i className="fas fa-briefcase"></i>
                            About
                        </a>
                        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle">
                            <i className="fas fa-copy"></i>
                            Pages
                        </a>
                        <ul className="collapse list-unstyled" id="pageSubmenu">
                            <li>
                                <a href="#">Page 1</a>
                            </li>
                            <li>
                                <a href="#">Page 2</a>
                            </li>
                            <li>
                                <a href="#">Page 3</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i className="fas fa-image"></i>
                            Portfolio
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i className="fas fa-question"></i>
                            FAQ
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i className="fas fa-paper-plane"></i>
                            Contact
                        </a>
                    </li>
                </ul>

                <ul className="list-unstyled CTAs">
                    <li>
                        <a href="" className="download">Download source</a>
                    </li>
                    <li>
                        <a href="" className="article">Back to article</a>
                    </li>
                </ul>
            </nav>

            <div id="content">

                <nav className="navbar navbar-expand-lg navbar-light bg-light">
                    <div className="container-fluid">

                        <button type="button" id="sidebarCollapse" className="btn btn-info">
                            <i className="fas fa-align-left"></i>
                            <span>Toggle Sidebar</span>
                        </button>
                        <button className="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i className="fas fa-align-justify"></i>
                        </button>

                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="nav navbar-nav ml-auto">
                                <li className="nav-item active">
                                    <a className="nav-link" href="#">Page</a>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Page</a>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Page</a>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#">Page</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <h2>Collapsible Sidebar Using Bootstrap 4</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div className="line"></div>

                <h2>Lorem Ipsum Dolor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div className="line"></div>

                <h2>Lorem Ipsum Dolor</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <div className="line"></div>

                <h3>Lorem Ipsum Dolor</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </div>

    </div>
    );
  

  
  export default SideBar;

这是我的 CSS：

/* .sidebar 
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
 */

/*
    DEMO STYLE
*/

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body 
    font-family: 'Poppins', sans-serif;
    background: #fafafa;


p 
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;


a,
a:hover,
a:focus 
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;


.navbar 
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);


.navbar-btn 
    box-shadow: none;
    outline: none !important;
    border: none;


.line 
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;


i,
span 
    display: inline-block;


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper 
    display: flex;
    align-items: stretch;


#sidebar 
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;


#sidebar.active 
    min-width: 80px;
    max-width: 80px;
    text-align: center;


#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs 
    display: none;


#sidebar.active .sidebar-header strong 
    display: block;


#sidebar ul li a 
    text-align: left;


#sidebar.active ul li a 
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;


#sidebar.active ul li a i 
    margin-right: 0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;


#sidebar.active ul ul a 
    padding: 10px !important;


#sidebar.active .dropdown-toggle::after 
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);


#sidebar .sidebar-header 
    padding: 20px;
    background: #6d7fcc;


#sidebar .sidebar-header strong 
    display: none;
    font-size: 1.8em;


#sidebar ul.components 
    padding: 20px 0;
    border-bottom: 1px solid #47748b;


#sidebar ul li a 
    padding: 10px;
    font-size: 1.1em;
    display: block;


#sidebar ul li a:hover 
    color: #7386D5;
    background: #fff;


#sidebar ul li a i 
    margin-right: 10px;


#sidebar ul li.active>a,
a[aria-expanded="true"] 
    color: #fff;
    background: #6d7fcc;


a[data-toggle="collapse"] 
    position: relative;


.dropdown-toggle::after 
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);


ul ul a 
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;


ul.CTAs 
    padding: 20px;


ul.CTAs a 
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;


a.download 
    background: #fff;
    color: #7386D5;


a.article,
a.article:hover 
    background: #6d7fcc !important;
    color: #fff !important;


/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content 
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) 
    #sidebar 
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    
    .dropdown-toggle::after 
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    
    #sidebar.active 
        margin-left: 0 !important;
    
    #sidebar .sidebar-header h3,
    #sidebar .CTAs 
        display: none;
    
    #sidebar .sidebar-header strong 
        display: block;
    
    #sidebar ul li a 
        padding: 20px 10px;
    
    #sidebar ul li a span 
        font-size: 0.85em;
    
    #sidebar ul li a i 
        margin-right: 0;
        display: block;
    
    #sidebar ul ul a 
        padding: 10px !important;
    
    #sidebar ul li a i 
        font-size: 1.3em;
    
    #sidebar 
        margin-left: 0;
    
    #sidebarCollapse span 
        display: none;
    

提前感谢您浏览所有这些代码行并帮助我。

【参考方案1】：

原来我从 bootstrap 和 popper 中丢失了一些 CDN。