简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - JS问题语求教大家详情写在正文中标题一句话不好描述附上代码，谢谢每个帮助我的朋友
阿神
阿神 2017-04-10 17:02:43
0
3
304

我是打算鼠标放在【卖家中心】上就会显示下面的子菜单，鼠标滑到哪个子菜单上，背景变灰色。第一次鼠标移入移出没有问题，但第二次问题来了。如果我上次放在【免费开店】上，然后移出，子菜单收回只剩下卖家中心，鼠标移到卖家中心上，子菜单展开，但不知道怎么搞的它默认【免费开店】背景色就是灰的，我不知道该怎么解决，求朋友们帮我看看

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝卖家中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .ulouter {
            width: 110px;
            margin: 150px auto;
        }
        .liouter {
            height: 30px;
            overflow: hidden;
        }
        .show {
            overflow: visible;
        }
        .seller {
            line-height: 30px;
        }
        .liinner li {
            height: 28px;
            line-height: 28px;
        }
        .bgcGray {
            background-color: #F5F5F5;
        }
        .bgcWhite {
            background-color: #fff;
        }
        .colOrange {
            color: orange;
        }
    </style>
    <script>
        window.onload = function () {
            var liOuter = document.getElementById("liouter");
            var liInner = document.getElementById("liinner");
            var seller = document.getElementById("seller");
            var arrLi = liInner.getElementsByTagName("li");
            liOuter.onmouseover = function () {
                liOuter.className = "liouter show";
                seller.className = "seller colOrange"
            }
            liOuter.onmouseout = function () {
                liOuter.className = "liouter";
                seller.className = "seller"
            }
            for(i=0;i<arrLi.length;i++){
                arrLi[i].onmouseover = function () {
                    for(j=0;j<arrLi.length;j++){
                        arrLi[j].className = "bgcWhite";
                    }
                    this.className = "bgcGray";
                }
            }

        }
    </script>
</head>
<body>

    <ul class="ulouter">
        <li class="liouter" id="liouter"><a href="#" class="seller" id="seller">卖家中心</a>
            <ul class="liinner" id="liinner">
                <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>
        </li>
    </ul>
</body>
</html>
阿神
阿神

闭关修行中......

모든 응답(3)
左手右手慢动作
左手右手慢动作2017-04-10 17:04:43 3층

你只要在鼠标移开卖家中心的时候，清空onmouseover的子菜单背景灰就可以了。

liOuter.onmouseout = function () {

            liOuter.className = "liouter";
            seller.className = "seller"
            for(j=0;j<arrLi.length;j++) {
                if(arrLi[j].className === "bgcGray") {
                    arrLi[j].className = "bgcWhite";
                    break;
                }
            }
        }
좋다 +0
답글 추가
迷茫
迷茫2017-04-10 17:04:43 2층

您好啊，按照我的理解，也看了你的代码，你的意思是不是希望如果鼠标经过卖家中心，显示出来的内层li如果有鼠标经过的li，则显示背景为灰色，如果鼠标移走，然后再放在卖家中心上的时候，你希望的是第一个免费开店是默认的灰色，而不是其他的（或者上次被鼠标经过的li）为灰色，如果我理解的没有错的话，你需要在liOuter.onmouseout = function () 这个方法上增加一个给其他都设置成白色，而把免费开店设置成灰色。也就是在你的代码基础上增加一个

liOuter.onmouseout = function () {
    liOuter.className = "liouter";
    seller.className = "seller";
    arrLi[0].className = "bgcGray";
    for(j=1;j<arrLi.length;j++){
    arrLi[j].className = "bgcWhite";
    }
}
좋다 +0
답글 추가
左手右手慢动作
左手右手慢动作2017-04-10 17:04:43 1층

重新整理下了思路，问题解决了，语言还是不好描述，直接贴代码吧

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝卖家中心</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        .ulouter {
            width: 110px;
            margin: 50px auto;
        }
        .liouter {
            height: 30px;
            overflow: hidden;
        }
        .seller-center {
            line-height: 30px;
        }
        .liinner {
            line-height: 28px;
        }
        .show {
            overflow: visible;
        }
        .bgcGray {
            background-color: #F5F5F5;
        }
        .bgcWhite {
            background-color: #fff;
        }
        .colOrange {
            color: orange;
        }
    </style>
    <script>
        window.onload = function () {
            var liOuter = document.getElementById("liouter");
            var sellerCenter = document.getElementById("seller-center");
            var arrLi = document.getElementsByClassName("liinner");

            liOuter.onmouseover = function () {
                liOuter.className += " show";
                sellerCenter.className += " colOrange";
            }
            liOuter.onmouseout = function () {
                liOuter.className = "liouter";
                sellerCenter.className = "seller-center";
                for(k=0;k<arrLi.length;k++){
                    arrLi[k].className = "liinner bgcWhite";
                }
            }
            for(i=0;i<arrLi.length;i++){
                arrLi[i].onmouseover = function () {
//                    alert(1);
                    for(j=0;j<arrLi.length;j++){
                        arrLi[j].className += " bgcWhite";
                    }
                    this.className = "liinner bgcGray";
                }
            }
        }
    </script>
</head>
<body>
    <ul class="ulouter">
        <li class="liouter" id="liouter"><a href="#" class="seller-center" id="seller-center">卖家中心</a>
            <ul>
                <li class="liinner"><a href="#">免费开店</a></li>
                <li class="liinner"><a href="#">已卖出的宝贝</a></li>
                <li class="liinner"><a href="#">出售中的宝贝</a></li>
                <li class="liinner"><a href="#">卖家服务市场</a></li>
                <li class="liinner"><a href="#">卖家培训中心</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！