Question

我正在尝试为我的页面设计导航，我想知道是否有人知道如何创建来自页面顶部，左侧，右侧和底部的滑动div，只有当相应的按钮（顶部，左侧，右侧）时，底部）被按下了？你能帮忙吗？

这是我正在尝试的代码。我可以让第一张幻灯片正常工作，但尝试多张幻灯片让我很困惑：

<script type="text/javascript" language="javascript">
$(document).ready(function() {
var $marginLefty = $('#slidemarginleft2 div.inner');
$marginLefty.css({
  marginLeft: $marginLefty.outerWidth() + 'px',
  display: 'block'
});


$('#slidemarginleft2 button').click(function() {
  $marginLefty.animate({
    marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ?
    $marginLefty.outerWidth() : 0
  });
});
  }); 

$(document).ready(function() {
 var $marginTopy = $('#slidemargintop div.topinner');
$marginTopy.css({
  marginTop: $marginTopy.outerWidth() + 'px',
  display: 'block'
});


$('#slidemargintop button').click(function() {
  $marginTopy.animate({
    marginTop: parseInt($marginTopy.css('marginTop'),10) == 0 ?
    $marginTopy.outerWidth() : 0
  });
});

}); 

</script>

<style type="text/css">
.slide {
background-color: #FFFFCC;
border: 1px solid #999999;
height: 1000px;
width: 100%;
margin: 0;
overflow: hidden;
position: relative;
background-image: url(images/1px.jpg);
background-repeat: repeat;
background-attachment: fixed;
}
.slide .inner {
background-color: #44CC55;
bottom: 0;
left: 0;
color: #333333;
height: 100%;
width: 100%;
padding: 0;
position: absolute;

}

.slide1 .topinner {
background-color: blue;
top: 0;
left: 0;
color: #FFF;
height: 100%;
width: 100%;
padding: 0;
position: absolute;

}
.slide button {
margin: 0.7em 0 0 0.7em;
}

.slide1 button {
margin: 0.7em 0 0 0.7em;
}

.js #slidebottom .inner {
display: none;
}
</style>

</head>

<body style="margin:0px; padding:0px;">

<div class="slide" id="slidemarginleft2">
    <button>right</button>
    <button>top</button>
    <div class="inner"><button>close</button>Animate this element's margin-left style property(hidden)</div>
    <div class="topinner"><button>close</button>Animate this element's margin-left style property(hidden)</div>
  </div>

  <div class="slide1" id="slidemargintop">
    <button>top</button>
    <div class="topinner"><button>close</button>Animate this element's margin-left style property(hidden)</div>
 </div>


</body>
</html>

Answer 1

尝试jquery .slideDown（）。slideUp（）

http://api.jquery.com/slideDown/

网站上有多个滑动div

1 个答案: