0

我有一个面板，将在我的网站标题后面分层，并在标题下方突出显示一个选项卡...理想情况下，当用户单击选项卡时，面板从标题后面向下滑动，当用户单击选项卡时再次，在标题后面向上滑动。我从来没有尝试过自己使用 javascript，所以这是我拼凑起来的东西......

有人可以指出我做错了什么吗？我只想让面板向下滑动，然后再向上滑动……并且代码尽可能简洁。我的测试站点目前位于http://test.vtisvc.com

CSS（注意，我暂时增加了这个元素的 z-index 只是为了显示它在标题上的位置。

#panel-hhs
{
  position: relative;
  height: 166px;
  width: 206px;
  top: 0;
  left: 0;
  margin-top: -137px;
  margin-left: 998px;
  background: url('images/hhs_panel.png');
  background-repeat: no-repeat;
  background-position: center;
  z-index: 130;
}

HTML（包括我的整个标题，javascript 在底部）

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQuery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/jQueryUI.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

</head>
<body>
<div id="banner-wrap">
  <div id="banner-bar">
    <div id="banner-hood">
      <center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_hood.png" style="float:center"></center>
        <div id="banner-logo"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_logo4.png" style="float:center"></center></div>
        <div id="banner-text"><center><a href="#"><font face="georgia" color="#8a0304&quot;">HOME</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">LISTINGS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">AGENTS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">SEARCH MLS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">RENTALS</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.google.com"><font face="georgia" color="#8a0304">HISTORY</font></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><font face="georgia" color="#8a0304">CONTACT</font></a></center></div>
        <div id="banner-svc"><center><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/header_svc.png"></center></div>
    </div>
  </div>
<script type="text/javascript">

jQuery(document).ready(function() {
    jquery("#panel-hhs").toggle(function() {
        jquery(this).animate({top: "-=100px"});
    }, function() {
        jquery(this).animate({top: "+=100px"});
    });
});

</script>
<div id="panel-hhs"><img src="http://test.vtisvc.com/wp-content/themes/brk_2013/images/hhs_pic2.png"></div>
</div>
4

1 回答 1

0

像http://jsfiddle.net/gKfKW/76/之类的东西？

你错过了：

position: relative;
top: -150px;

在默认状态。

于 2013-09-09T19:29:36.413 回答