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

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

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

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

问题相关代码，请勿粘贴截图
 <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日

悬赏问题

  • ¥15 Android Studio webview 的使用问题， 播放器横屏全屏
  • ¥15 删掉jdk后重新下载，Java web所需要的eclipse无法使用
  • ¥15 uniapp正式环境中通过webapi将本地数据推送到设备出现的跨域问题
  • ¥15 xui建立节点，显示错误
  • ¥15 关于#单片机#的问题：开始、复位、十进制的功能可以实现，但是切换八进制的功能无法实现（按下按键也没有效果），把初始状态调成八进制，也是八进制可以实现但是切换到十进制不行（相关搜索：汇编语言|计数器）
  • ¥15 VINS-Mono或Fusion中feature_manager中estimated_depth是特征的深度还是逆深度？
  • ¥15 谷歌浏览器如何备份抖音网页数据
  • ¥15 分别有什么商家下面需要非常多的骑手为它工作？
  • ¥15 开机logo到Qt应用起来会黑屏将近两秒时间
  • ¥15 vfp工程项目管理系统的业务流程图