【发布时间】：2022-01-16 01:05:45
【问题描述】：
我在尝试完成侧边栏菜单时遇到问题。现在内容直接显示在标题下方，而不是在单击菜单选项卡时显示。关闭菜单按钮也包含在标签中，但它现在似乎没有做任何事情。我可以弄清楚侧边栏的过渡，但我的问题是在单击标题附近的按钮时显示内容。我认为使用查询选择器会自动使其显示侧边栏菜单。请让我知道我缺少什么。
App.js：
import fzero from './image/fzero.jpg';
import sonic from './image/sonic.jpg';
import retail from './image/retail.jpg';
import mark from './image/mark.jpg';
import heli from './image/heli.png';
import team from './image/team.png';
import tiger from './image/tiger.png';
import mario from './image/mario.jpg';
import './index.css';
function App() {
const openMenu = () =>{
document.querySelector('.sidebar').classList.add('open')
}
const closeMenu = () =>{
document.querySelector('.sidebar').classList.remove('open')
}
return (
<div className="App">
<body>
<header>
<div className='head1'>
<div className='dropdown'>
<button onClick={openMenu}>☰</button>
</div>
<h1>GameShop</h1>
</div>
</header>
<aside className="sidebar">
<h3>Extras</h3>
<button className="side-close" onClick={closeMenu}>X</button>
<ul>
<li>
<a href="index.html">Accessories</a>
</li>
<li>
<a href="index.html">Pre-orders</a>
</li>
</ul>
</aside>
<div className='container'>
<div className='prod'>
<img src={fzero} className="fzero" alt="logo" />
<div className='item'>
<a className="cover" href="">
F-zero
</a>
<div className='system'>
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={sonic} className="sonic" alt="logo" />
<div className='item'>
<a className="cover" href="">
Sonic Earth
</a>
<div className='system'>
<p>Playstation</p>
</div>
<div className='price'>
<p>$49.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={retail} className="retail" alt="logo" />
<div className='item'>
<a className="cover" href="">
Retail Manager 13
</a>
<div className='system'>
<p>PC</p>
</div>
<div className='price'>
<p>$12.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={mark} className="mark" alt="logo" />
<div className='item'>
<a className="cover" href="">
Mark Zuckerberg's Pro Surfer
</a>
<div className='system'>
<p>Xbox</p>
</div>
<div className='price'>
<p>$39.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={mario} className="mario" alt="logo" />
<div className='item'>
<a className="cover" href="">
Super Mario Maker Deluxe
</a>
<div className='system'>
<p>Nintendo Switch</p>
</div>
<div className="price">
<p>$59.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={heli} className="heli" alt="logo" />
<div className='item'>
<a className="cover" href="">
Planet of the Helicopter in Africa
</a>
<div className='system'>
<p>PC</p>
</div>
<div className="price">
<p>$12.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={team} className="team" alt="logo" />
<div className='item'>
<a className="cover" href="">
Team Fortress 2.5
</a>
<div className='system'>
<p>Xbox</p>
</div>
<div className="price">
<p>$39.99</p>
</div>
</div>
</div>
<div className='prod'>
<img src={tiger} className="tiger" alt="logo" />
<div className='item'>
<a className="cover" href="">
Tiger Woods Driving Simulator
</a>
<div className='system'>
<p>Playstation</p>
</div>
<div className="price">
<p>$49.99</p>
</div>
</div>
</div>
</div>
</body>
</div>
);
}
export default App;
【问题讨论】：
-
你在使用 Reactjs 吗？如果你使用 Reactjs，你真的不需要直接使用
document.querySelector('.sidebar').classList.add('open')来操作 DOM。您在上面的代码中没有提供 CSS，所以我们不知道添加open类时会发生什么。你能创建一个codesandbox.io 来重现你的问题吗？
标签： javascript menu jquery-selectors sidebar