iscroll.js中 有slideToggle（）事件 ，当二级菜单收缩后，滑动内容区不让内容超出范围
0
[已关闭问题]
关闭于 2015-05-19 15:38
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" c /> <style type="text/css">
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
border:0px;
padding:0px;
}
body{
Font-size=62.5%;
font-family:'微软雅黑';
min-width:100px;
line-height: 2rem;
}
a{
text-decoration: none;
}
#header{
position: absolute;
height: 3rem;
width: 100%;
background-color: #f00;
}
#counter{
position: absolute;
width: 100%;
top: 3rem;
bottom: 3rem;
overflow: hidden;
}
#cou_left1{
width: 30%;
height: 544px;
background-color: #ccc;
padding-left: 1rem;
}
#scroller{
position: absolute;
}
#footer{
position: absolute;
bottom: 0;
height: 3rem;
width: 100%;
background-color: #f00;
}
</style>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/zq_jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="counter">
<div class="cou_left" id="cou_left1">
<div id="scroller">
<div class="zq_nav">
<div class="header bqsh">
<span>生活</span>
</div>
</div>
<div class="zq_nav">
<div class="header" id="h_2">
<span>特色服务</span>
<span class="arrow down"></span>
</div>
<div class="menu" style="display:block;">
<div id="cate_a" class="li1" value="洗衣干洗">
<div class="menu2">
<a href="#"><span class="point fr"></span>洗衣干洗<span class="point fl"></span></a>
</div> </div>
<div id="cate_b" class="li1" value="酒"><div class="menu2">
<a href="#"><span class="point fr"></span>酒急送<span class="point fl"></span></a>
</div>
</div>
<div id="cate_e" class="li1" value="收发快递"><div class="menu2">
<a href="#"><span class="point fr"></span>收发快递<span class="point fl"></span></a>
</div>
</div>
</div>
</div>
<div class="zq_nav">
<div class="header" id="h_3">
<span>网络超市</span>
<span class="arrow down"></span>
</div>
<div class="menu" style="display:block;">
<div id="cate_851" class="li" value="851"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>代购香烟<span class="point fl"></span></a>
</div>
</div>
<div id="cate_850" class="li" value="850"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>水/饮料<span class="point fl"></span></a>
</div>
</div>
<div id="cate_677" class="li" value="677"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>乳制品<span class="point fl"></span></a>
</div>
</div>
<div id="cate_685" class="li" value="685"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>冲饮<span class="point fl"></span></a>
</div>
</div>
<div id="cate_691" class="li" value="691"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>休闲零食<span class="point fl"></span></a>
</div>
</div>
<div id="cate_706" class="li" value="706"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>雪糕、冷饮<span class="point fl"></span></a>
</div>
</div>
<div id="cate_708" class="li" value="708"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>饼干糕点<span class="point fl"></span></a>
</div>
</div>
<div id="cate_713" class="li" value="713"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>方便速食<span class="point fl"></span></a>
</div>
</div>
<div id="cate_723" class="li" value="723"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>酒水<span class="point fl"></span></a>
</div>
</div>
<div id="cate_735" class="li" value="735"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>糖果/巧克力<span class="point fl"></span></a>
</div>
</div>
<div id="cate_742" class="li" value="742"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>粮油副食<span class="point fl"></span></a>
</div>
</div>
<div id="cate_749" class="li" value="749"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>调料、酱<span class="point fl"></span></a>
</div>
</div>
<div id="cate_756" class="li" value="756"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>家居清洁<span class="point fl"></span></a>
</div>
</div>
<div id="cate_766" class="li" value="766"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>美容洗护<span class="point fl"></span></a>
</div>
</div>
<div id="cate_779" class="li" value="779"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>个人护理<span class="point fl"></span></a>
</div>
</div>
<div id="cate_781" class="li" value="781"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>小百货<span class="point fl"></span></a>
</div>
</div>
<div id="cate_825" class="li" value="825"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>进口食品<span class="point fl"></span></a>
</div>
</div>
<div id="cate_838" class="li" value="838"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>洗衣<span class="point fl"></span></a>
</div>
</div>
<div id="cate_843" class="li" value="843"><div class="menu2">
<a href="javascript:void(0)"><span class="point fr"></span>收发快递<span class="point fl"></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">
$(".header").click(function(event){
$(this).siblings(".menu").slideToggle();
});
function load (argument) {
var myScroll=new IScroll(".cou_left",{
scrollbars:true,
fadeScrollbars:true,
shrinkScrollbars:"scale",
preventDefault: false,
preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A)$/ }
});
}
window. /> document.getElementById("coun_left1").addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
</body>
</html>
