suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - 在调整div宽度后下拉菜单无法正常使用

【我的淘宝】【收藏夹】下面菜单弹出后鼠标下移菜单消失
runjs的链接 http://runjs.cn/detail/fub1q6n3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝网-我的购物车</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body{font-family:Hiragino Sans GB;line-height:35px}
a{text-decoration:none;}
p{color:black;text-decoration:none;height:35px;font-size:12px;}
.header{width:1903px;background:#F5F5F5;height:36px;margin:0 auto;}
.header p{color:#6C6C6C;}
.leftheader{position:relative;left:360px;width:30%;display:inline-block;height:35px;}
.leftheader p{display:inline-block;position:relative;top:0px;}
.rightheader{float:right;width:900px;}
.nav{height:35px;}
.header p:hover{color:#FF7F00;background-color:white }
.nav>li>ul>li p:hover{color:#6C6C6C;background-color:#F5F5F5;}
.nav ul:hover{background-color:white;}


.nav>ul{position:relative;top:0px;width:80px;}
.nav>li>ul{display:none;position:absolute;padding:0px;}
.nav>li{display:inline-block;width:80px;}
.nav>li>ul>li{display:block;}
.nav li{height:35px;}
.header p.one {color:#F22E00;}
.nav>li>ul>li{width:80px;}

.header-two{height:95px;width:1190px;margin:0 auto;position:relative;padding:20px 0px 40px;}
.headlogo{height:45px;width:181px;background-image:url(./img/logo.png);position:absolute;}

.cart{height:1190px;width:95px}

.footer{position:relative;bottom:40px;}
.footer-bd{position:relative;bottom:20px;}
#xiding{ position: fixed; left: 0; bottom: 0; display: none; 
          width:100%;  height: 30px; background: #ddd;}
</style>
</head>
<body>

<p class="header">
<p class="leftheader">
<a href="#"><p>kkkkkenneth</p></a>
<a href="#"><img src="./img/1.png" a href="#" ><img src=./img/a.png></a>
<img src="./img/2.png"><p>消息</p> 
<a href="#"><p>手机逛淘宝</p></a>
</p>
  <p class="rightheader">
 
<ul class="nav" > 
<li>
 <p class="one">淘宝网首页</p> 
 </li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">

<a href="#"><p>我的淘宝</p></a>
 
<ul> 
<li><a href="#"><p>已买到的宝贝</p></a></li> 
<li><a href="#"><p>足迹</p></a></li> 
<li><a href="#"><p>爱逛街</p></a></li> 
<li><a href="#"><p>淘宝达人</p></a></li> 
<li><a href="#"><p>新欢</p></a></li> 
</ul>

</li>
<li>
<a href="#"><p><img src="./img/3.png">购物车</p></a>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#"><p><img src="./img/4.png">收藏夹<img src=./img/a.png></p></a>
<ul>
<li><a href="#"><p>收藏的宝贝</p></a></li>
<li><a href="#"><p>收藏的店铺</p></a></li>
</ul>
</li>
<li>
<a href="#"><p>商品分类</p></a>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#"><p>卖家中心<img src=./img/a.png></p></a>
<ul>
<li><a href="#"><p>免费开店</p></a></li>
<li><a href="#"><p>已卖出的宝贝</p></a></li>
<li><a href="#"><p>出售中的宝贝</p></a></li>
<li><a href="#"><p>卖家服务市场</p></a></li>
<li><a href="#"><p>卖家培训中心</p></a></li>
</ul>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#"><p>联系客服<img src=./img/a.png></p></a>
<ul>
<li><a href="#"><p>消费者客服</p></a></li>
<li><a href="#"><p>卖家客服</p></a></li>
</ul>
</li>
<li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)">
<a href="#"><p><img src=./img/c.png>网站导航<img src=./img/b.png></p></a>
<ul></ul>
</li>
</ul> 
</p>
</p>
<p class="header-two">
<p class="tblogo">
<a href="#">
<span class="headlogo">
</span>
</a>
</p>
<p>
</p>
</p>
<p class="cart">
</p>
<p style="height: 2000px;"></p>
<p id="xiding">吸顶灯</p>
<p class="footer">
<p>
      <a href="http://www.alibabagroup.com/cn/global/home">阿里巴巴集团</a>
      <b>|</b>
      <a href="//www.taobao.com">淘宝网</a>
      <b>|</b>
      <a href="//www.tmall.com">天猫</a>
      <b>|</b>
      <a href="//ju.taobao.com">聚划算</a>
      <b>|</b>
      <a href="http://www.aliexpress.com">全球速卖通</a>
      <b>|</b>
      <a href="http://www.alibaba.com/">阿里巴巴国际交易市场</a>
      <b>|</b>
      <a href="http://www.1688.com">1688</a>
      <b>|</b>
      <a href="http://www.alimama.com">阿里妈妈</a>
      <b>|</b>
      <a href="//www.alitrip.com">阿里旅行 · 去啊</a>
      <b>|</b>
      <a href="http://www.aliyun.com">阿里云计算</a>
      <b>|</b>
      <a href="http://www.yunos.com">YunOS</a>
      <b>|</b>
      <a href="http://www.aliqin.cn/">阿里通信</a>
      <b>|</b>
      <a href="http://www.etao.com/">一淘</a>
      <b>|</b>
      <a href="http://www.net.cn">万网</a>
      <b>|</b>
      <a href="http://www.autonavi.com/">高德</a>
      <b>|</b>
      <a href="http://www.uc.cn/">UC</a>
      <b>|</b>
      <a href="http://www.umeng.com/">友盟</a>
      <br>
      <a href="http://www.xiami.com">虾米</a>
      <b>|</b>
      <a href="http://www.ttpod.com/">天天动听</a>
      <b>|</b>
      <a href="http://www.laiwang.com/">来往</a>
      <b>|</b>
      <a href="http://www.dingtalk.com/?lwfrom=20150130160830727">钉钉</a>
      <b>|</b>
      <a href="https://www.alipay.com">支付宝</a>
    </p>
    </p>
    <p class="footer-bd">
    <p>
      <a href="//www.taobao.com/about">关于淘宝</a>
      <a href="//www.taobao.com/about/partners.php">合作伙伴</a>
      <a href="//pro.taobao.com">营销中心</a>
      <a href="http://jubao.alibaba.com" >廉正举报</a>
      <a href="//service.taobao.com/support/main/service_route.htm">联系客服</a>
      <a href="//open.taobao.com">开放平台</a>
      <a href="//www.taobao.com/about/join.php">诚征英才</a>
      <a href="//www.taobao.com/about/contact.php">联系我们</a>
      <a href="//www.taobao.com/sitemap.php">网站地图</a>
      <a href="//www.taobao.com/go/chn/tb-fp/2014/law.php">法律声明</a>
      <em>© 2003-2016 Taobao.com 版权所有</em>
    </p>
    <p>
      <p>网络文化经营许可证：<a href="//img.alicdn.com/tps/i2/TB1YFcPLpXXXXaiXFXXcaDpFFXX-803-473.png">浙网文[2013]0268-027号</a></p>
      <b>|</b>
      <p data-spm-protocol="i">增值电信业务经营许可证：<a href="http://zcainfo.miitbeian.gov.cn/state/outPortal/loginPortal.action">浙B2-20080224-1</a></p>
      <b>|</b>
      <p>信息网络传播视听节目许可证：1109364号</p>
      <b>|</b>
      <p> 互联网违法和不良信息举报电话:0571-81683755 blxx@list.alibaba-inc.com </p>
    </p>
  </p>
  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js">

<script>
    var $xiding = $("#xiding");
    $(window).on("scroll"),function(){
        var $this = $(this);
        var st = $this.scrollTop();
        if(st>300){
            $xiding.stop(true,true).fadeIn();    //#xiding是要显示的p
        }  else {
            $xiding.stop(true,true).fadeOut();
        }
    });
</script>
<script type="text/javascript"> 
function displaysubmenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display="block"; 

} 
function hidesubmenu(li) { 
var subMenu = li.getElementsByTagName("ul")[0]; 
subMenu.style.display="none"; 
} 
</script> 
</body>
</html>

因为我上传到runjs之后发现与自己运行显示的不一样所以就直接贴出来了

ringa_leeringa_lee2789 Tage vor801

Antworte allen(1)Ich werde antworten

  • 巴扎黑

    巴扎黑2017-04-11 10:03:06

    你是要这种的吗?

    * {
margin: 0px;
padding: 0px;
}
body{font-family:Hiragino Sans GB;line-height:35px}
a{text-decoration:none;}
p{color:black;text-decoration:none;height:35px;font-size:12px;}
.header{**max-width:1190px;**background:#F5F5F5;height:36px;margin:0 auto;}
.header p{color:#6C6C6C;}
.leftheader{float:left;/*width:30%;*//*display:inline-block;*/height:35px;}
.leftheader p{display:inline-block;position:relative;top:0px;}
.rightheader{float:right;/*width:900px;*/}
.nav{height:35px;}
.header p:hover{color:#FF7F00;background-color:white }
.nav>li>ul>li p:hover{color:#6C6C6C;background-color:#F5F5F5;}
.nav ul:hover{background-color:white;}


.nav>ul{position:relative;top:0px;width:80px;}
.nav>li>ul{display:none;position:absolute;padding:0px;}
.nav>li{/*display:inline-block;*/float:left;width:80px;}
.nav>li>ul>li{display:block;}
.nav li{height:35px;}
.header p.one {color:#F22E00;}
.nav>li>ul>li{width:80px;}

.header-two{height:95px;width:1190px;margin:0 auto;position:relative;padding:20px 0px 40px;}
.headlogo{height:45px;width:181px;background-image:url(./img/logo.png);position:absolute;}

.cart{height:1190px;width:95px}

.footer{position:relative;bottom:40px;}
.footer-bd{position:relative;bottom:20px;}
#xiding{ position: fixed; left: 0; bottom: 0; display: none; 
          width:100%;  height: 30px; background: #ddd;}
</style>
</head>
<body>

    Antwort
    0
  • StornierenAntwort