虾仁A 2021-11-20 09:25 采纳率: 78.8%
浏览 97
已结题

如何解决小米导航栏下拉菜单选中问题

问题遇到的现象和发生背景

我的下拉菜单只能摸不能被选中（鼠标经过就显示，鼠标离开就隐藏，但是下拉菜单还没选中就隐藏了）

问题相关代码，请勿粘贴截图
 <div class="tounav w">
            <div class="tubiao"><img src="102小米商城网页模板下载/images/LOGO.png"></div>
            <!--   商品介绍栏STARTS         -->
            <div class="jiesao">
                <ul>
                    <li><a href="">Xiaomi手机</a></li>
                    <li><a href="">Redmi红米</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">家电</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <div class="xial">
                <div class="la w">
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                </div>   
            </div>
            <div class="xial">
                <div class="la w">
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                    <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                </div>   
            </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>
           <div class="xial">
               <div class="la w">
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
                   <div><a href=""><img src="./小米官网抠图/小米下拉菜单" alt=""></a><span>Xiaomi Civi</span><p>2599元起</p></div>
               </div>   
           </div>


.tounav {
    display: flex;
    margin: 20px auto;
}

.tounav .tounav {
    flex: 20%;
}

.tubiao img {
    width: 55px;
    height: 55px;
    border-radius: 20px;
}

/* 商品介绍栏模块CSS */
.jiesao {
    flex: 50%;
}

.jiesao ul {
    width: 670px;

    height: 55px;
    margin-left: 200px;

    display: flex;

}

.jiesao ul li {
    position: relative;
}

.jiesao ul li a {

    font-size: 16px;
    color: #333;
    margin: 0 5px;
    text-align: center;
    line-height: 55px;
}

/* 小米商品下拉菜单CSS */
.xial {
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    display: none;
    height: 250px;
    border-bottom: 1px solid #F5F5F5;
    border-top: 1px solid #CCC;
    background-color: #FFFFFF;
    box-shadow: 0px 8px 10px rgba(0, 0, 0, .1);
    z-index: 20;
}

.la {
    height: 250px;
    display: flex;
    justify-content: space-around;
    margin: 10px auto;
}

.la div {
    flex: 1;
    text-align: center;
    width: 200px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 0;
    

}

.la div a {
    width: 160px;
    height: 110px;
    border-right: 1px solid #E0E0E0;
}

.la div a img {
    width: 100%;
    height: 100%;
}
.la span{
    font-size: 14px;
    margin: 20px 0px 5px 0px;
}
.la div p{
    color: #FF4500;
    font-size: 12px;
}


$(".jiesao li").on({
    mouseover:function(){
        var index =$(this).index()
        $(".xial").eq(index).stop().fadeIn("slow")
    },
    mouseout:function(){
        
        $(".xial").stop().fadeOut("slow")
    }
    
})
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

我想在鼠标离开导航栏下拉菜单也能显示只有移到其他内容区域下拉菜单才隐藏

  • 写回答

1条回答 默认 最新

  • 孙叫兽 前端领域优质创作者 2021-11-20 09:31
    关注

    控制你的js方法就行了，把除了内容区域的地方都加上鼠标进入和出去的效果

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月23日
  • 已采纳回答 12月15日
  • 修改了问题 11月20日
  • 创建了问题 11月20日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效