请问为什么移入二级菜单还是没显示出来。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<div class="mainbox" id="mainbox">
        <!-- 图片部分 -->
        <div class="banner-box" id="banner-box">
            <!-- 背景图 -->
            <div class="slid-box" id="slidBox">
                <div class="slid slid1"></div>
                <div class="slid slid2"></div>
                <div class="slid slid3"></div>
            </div>
            <!-- 两个小箭头 -->
             
                <a href="#" class="button btnL" id="btnL">
                </a>
                <a href="#" class="button btnR" id="btnR">
                </a>
             
            <!-- 图下面3个点 -->
            <div class="main-active" id="dot">
                <span  class=" dott active "></span>
                <span  class="dott"></span>
                <span  class="dott"></span>
            </div>
        </div>
 
 
 
    <!-- 导航部分 -->
     <!-- 一级菜单 -->
    <div class="menu-box">
    <!-- 导航下的遮罩 -->
    <div class="a"></div>
    <!-- 一级菜单的内容 -->
    <div class="item-box" id="item-box">
        <div class="menu-item menu-item1">
            <a href="#">
                <span>手机、配件</span>
                <i></i>
            </a>
        </div>
        <div class="menu-item">
            <a href="#">
                <span>电脑</span>
                <i></i>
            </a>
        </div>
        <div class="menu-item">
            <a href="#">
                <span>家用电器</span>
                <i></i>
            </a>
        </div>
        <div class="menu-item">
            <a href="#">
                <span>家具</span>
                <i></i>
            </a>
        </div>
    </div>
    </div>
    <!-- 二级菜单 -->
            <div class="sub-menu hide" id="sub-menu">
                    <div class="inner-box">
                        <div class="sub-inner-box">
                            <div class="title">手机、配件</div>
                            <div class="sub-row">
                                <span class="bold mr10">手机通讯：</span>
                                <a href="">手机</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">手机维修</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">以旧换新</a>
                            </div>
                            <div class="sub-row">
                                <span class="bold mr10">手机配件：</span>
                                <a href="">手机壳</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">手机存储卡</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">数据线</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">充电器</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">电池</a>
                            </div>
                            <div class="sub-row">
                                <span class="bold mr10">运营商：</span>
                                <a href="">中国联通</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">中国移动</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">中国电信</a>
                            </div>
                            <div class="sub-row">
                                <span class="bold mr10">智能设备：</span>
                                <a href="">智能手环</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">智能家居</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">智能手表</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">其他配件</a>
                            </div>
                            <div class="sub-row">
                                <span class="bold mr10">娱乐：</span>
                                <a href="">耳机</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">音响</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">收音机</a>
                                <span class="ml10 mr10">/</span>
                                <a href="">麦克风</a>
                            </div>
                        </div>
                    </div>
                    <div class="inner-box">
                        <div class="sub-inner-box">
                            <div class="title">电脑</div>
                            <div class="sub-row">
                               <span class="bold mr10">电脑：</span>
                               <a href="">笔记本</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">平板</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">一体机</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">电脑配件：</span>
                               <a href="">显示器</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">CPU</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">主板</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">硬盘</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">电源</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">显卡</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">其他配件</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">游戏设备：</span>
                               <a href="">游戏机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">耳机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">游戏软件</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">网络产品：</span>
                               <a href="">路由器</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">网络机顶盒</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">交换机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">存储卡</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">网卡</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">外部产品：</span>
                               <a href="">鼠标</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">键盘</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">U盘</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">移动硬盘</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">鼠标垫</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">电脑清洁</a>
                            </div>
                        </div>
                    </div>
                    <div class="inner-box">
                        <div class="sub-inner-box">
                            <div class="title">家用电器</div>
                            <div class="sub-row">
                               <span class="bold mr10">电视：</span>
                               <a href="">国产品牌</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">韩国品牌</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">欧美品牌</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">空调：</span>
                               <a href="">显示器</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">柜式</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">中央</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">壁挂式</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">冰箱：</span>
                               <a href="">多门</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">对开门</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">三门</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">双门</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">洗衣机：</span>
                               <a href="">滚筒式洗衣机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">迷你洗衣机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">洗烘一体机</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">厨房电器：</span>
                               <a href="">油烟机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">洗碗机</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">燃气灶</a>
                            </div>
                        </div>
                    </div>
                    <div class="inner-box">
                        <div class="sub-inner-box">
                            <div class="title">家具</div>
                            <div class="sub-row">
                               <span class="bold mr10">家纺：</span>
                               <a href="">被子</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">枕头</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">四件套</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">床垫</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">灯具：</span>
                               <a href="">台灯</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">顶灯</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">节能灯</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">应急灯</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">厨具：</span>
                               <a href="">烹饪锅具</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">餐具</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">菜板刀具</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">家装：</span>
                               <a href="">地毯</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">沙发垫套</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">装饰字画</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">照片墙</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">窗帘</a>
                            </div>
                            <div class="sub-row">
                               <span class="bold mr10">生活日用：</span>
                               <a href="">收纳用品</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">浴室用品</a>
                               <span class="ml10 mr10">/</span>
                               <a href="">雨伞雨衣</a>
                            </div>
                        </div>
                    </div>
            </div>
 
    <script src="js/style.js"></script>
</div>
</body>
</html>
 
 
//CSS样式
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
}
.mainbox{
    width: 1200px;
    height: 460px;
    margin: 0 auto;
    position: relative;
}
 
.banner-box{
    width: 1200px;
    height: 460px;
    z-index: 1;
     
}
/* 图片部分 */
 
.slid-box{
    width: 1200px;
    height: 460px;
    overflow: hidden;
}
.slid{
    width: 1200px;
    height: 460px;
    float: left;
     
} 
.slid1{
    background: url(../img/bg1.jpg);
}
.slid2{
    background: url(../img/bg2.jpg);
}
.slid3{
    background: url(../img/bg3.jpg);
}
 
/* 两个小箭头 */
.btnL{  
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background: url(../img/arrow.png) no-repeat center;
    transform: rotate(180deg);
}
.btnR{
    position: absolute;
    width: 40px;
    height: 80px;
    right: 0px;
    top: 50%;
    margin-top: -40px;
    background: url(../img/arrow.png) no-repeat center;
}
.button:hover{
    background:#333;
    opacity: 0.2;
    filter: alpha(opacity=80);
}
 
/* 图片下的3个点 */
.main-active{
    line-height: 12px;
    position: absolute;
    bottom: 24px;
    right: 0;
    padding-right:24px ;
}
.main-active .dott{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .8) inset;
}
 
.main-active .active{
    box-shadow: 0 0 0 2px rgba(7, 17, 27, .4) inset;
    background: #fff;
}
 
 
/* 菜单栏 */
.a{
    position: absolute;
    top: 0;
    left: 0;
    width: 244px;
    height: 460px;
    background: rgba(7, 17, 27, .2);
    z-index: 2;
}
.item-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 244px;
    height: 460px;
    z-index: 3;
}
.menu-item{
    height: 62px;
    width: 244px;
    line-height: 64px;
    font-size: 16px;   
    position: relative;
    
}
 
/* .menu-item1{
    background: rgba(12, 12, 12, 0.4);
} */
.menu-item a{
    display: block;
    color: #fff;
    margin: 0 20px;
    padding: 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    height: 63px;
    font-size:16px;
     
}
 
.menu-item i{
    font-style: normal;
    display: inline-block;
    width: 16px;
    height: 30px;
    background: url(../img/arrow.png);
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -15px;
    transform: scale(.5,.5);
}
 
/* 二级菜单 */
.sub-menu{
    height:460px ;
    width: 730px;
    position: absolute;
    left: 244px;
    top: 0;
    overflow: hidden;
}
.hide{
    display: none;
}
 
 
.inner-box{
    height:460px ;
    width: 730px;
}
.sub-inner-box{
    height:460px ;
    width: 730px;
    background: url(../img/fe.png);
}
.sub-inner-box .title{
    color: red;
    padding: 25px 10px;
    font-size: 20px;
    font-weight: bold;
}
 
.sub-inner-box .bold{
    padding:0 10px ;
}
.sub-inner-box .ml10{
    padding: 0 10px;
}
 
 
///JS
// 封装添加事件方法
function addHandler(element,type,handler){
if(element.addEventListener){
    element.addEventListener(type,handler);
}else if(element.attachEvent){
    element.attachEvent("on"+type,handler)
}
else{element["on"+type]=handler}
 
}
//封装获取ID的方法
function byId(id){
    if(typeof(id)==="string"){
        return document.getElementById(id);
    }
    else {
        return id;
    }
    }
     
 
var index=0;            //定义一个数值为0的变量，用于接收索引；
var timer=null;         //初始化一个变量，用于接收定时器;
 
 
 
var btnL=byId("btnL"),btnR=byId("btnR");
var slidBox=byId("slidBox");
var pics=slidBox.getElementsByClassName("slid");
var dots=byId("dot").getElementsByTagName("span");
 
 
 
//给两个小箭头添加事件
addHandler(btnR,"click",function(){
    index++;
    if(index>=pics.length){
        index=0
     };
// //先把每一个图片和圆点的样式隐藏，点击一次显示对应的图片和圆点样式  (可封装成通用函数)
   for(var i=0;i<pics.length;i++){
    pics[i].style.display="none";
    dots[i].className="dott";
   }
   pics[index].style.display="block";
   dots[index].className="active dott"
}
);
//左箭头
addHandler(btnL,"click",function(){
    index--;
    if(index<0){
        index=pics.length-1
     }
     console.log(index)
//先把每一个图片和圆点的样式隐藏，点击一次显示对应的图片和圆点样式  (可封装成通用函数)
   for(var i=0;i<pics.length;i++){
    pics[i].style.display="none";
    dots[i].className="dott";
   }
   pics[index].style.display="block";
   dots[index].className="active dott"
}
);
//给每个小圆点添加事件
for(var j=0;j<dots.length;j++){
    dots[j].setAttribute("dotId",j);
    addHandler(dots[j],"click",function(){
        index=this.getAttribute("dotId");
        for(var i=0;i<pics.length;i++){
            pics[i].style.display="none";
            dots[i].className="dott";
           }
           pics[index].style.display="block";
           dots[index].className="active dott";}
    )
 
};
 
// //添加定时器，实现轮播
function startAutoPlay(){
    timer=setInterval(function(){
        index++;
        if(index>=pics.length){
            index=0
        };
        for(var i=0;i<pics.length;i++){
            pics[i].style.display="none";
            dots[i].className="dott";
           }
           pics[index].style.display="block";
           dots[index].className="active dott";
    },1000)
};
startAutoPlay();
 
//当鼠标移入界面，清除定时器
var bannerBox=byId("banner-box");
addHandler(bannerBox,"mouseover",function(){
    clearInterval(timer);
});
//当鼠标离开时  开启定时器
addHandler(bannerBox,"mouseout",function(){
    startAutoPlay(timer);
});
 
                                //给标题部分添加事件
var itemBox=byId("item-box");
var menuItems=itemBox.getElementsByClassName("menu-item");
var subMenu=byId("sub-menu");
var innerBox=subMenu.getElementsByClassName("inner-box");
// 给每一个一级标题都添加移入事件
for(var k=0;k<menuItems.length;k++){
menuItems[k].setAttribute("menuId",k);
addHandler(menuItems[k],"mouseover",function(){
 //因为外盒子添加了隐藏，触发事件是会出现冲突，所以先把外盒子的隐藏去掉    
    subMenu.className="sub-menu";     
    index=this.getAttribute("menuId");
    // //触发事件前先把样式隐藏，触发哪个事件显示哪个样式
    for(var p=0;p<menuItems.length;p++){
        menuItems[p].style.background="none";
        innerBox[p].style.display="none";
    } 
    menuItems[index].style.background="rgba(12, 12, 12, 0.4)";
    innerBox[index].style.display="block";
     
})
}
//给每一个一级标题添加离开事件
for(var k=0;k<menuItems.length;k++){
    menuItems[k].setAttribute("menuId",k);
    addHandler(menuItems[k],"mouseout",function(){
//触发事件前先把样式隐藏，触发哪个事件显示哪个样式
    index=this.getAttribute("menuId");
    menuItems[index].style.background="none";
    innerBox[index].style.display="none";
    })
}
  //鼠标移入子菜单，子菜单显示
  addHandler(subMenu,"mouseover",function(){
    this.className = "sub-menu";
});
//鼠标离开子菜单，子菜单消失
addHandler(subMenu,"mouseout",function(){
    this.className = "sub-menu hide";
     
});

慕妹8172416 2019-12-10

源自：项目：JS实现轮播图特效 3-7 菜单脚本（2）

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-12-11 16:59:28

同学你好，理解的没有问题，很棒！

祝学习愉快！

收起回答

好帮手慕星星 2019-12-11 10:34:48

同学你好，视频中没有给一级菜单每项绑定移出事件，而你的代码中写了，移出一级菜单，将二级菜单的内容innerBox隐藏。在二级菜单外层大盒子subMenu移入事件中，只是给大盒子添加了显示，但是里面的内容innerBox还是隐藏的，所以看不见。

可以定义一个临时变量，接收移出一级菜单的索引，在二级菜单大盒子移入事件中显示对应的二级菜单，参考：

或者按照视频中的思路完成，一级菜单每项不绑定移出事件，绑定在一级菜单大盒子上。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕妹8172416 #1

根据老师的回答，我理解成：因为我给了每一项一级标题添加了鼠标离开，二级菜单消失的事件，如果我只给二级菜单外层的大盒子添加移入后显示的事件的话，移入二级菜单后大盒子显示了，但是里面盒子受到一级菜单鼠标离开事件的影响，所以才不会显示出来。

2019-12-11 15:42:51