【发布时间】：2013-03-07 11:09:30
【问题描述】：
当您单击“RSVP”链接时，我试图模仿this website 的效果。效果是隐藏的 DIV 效果，如果您单击 RSVP 链接，主菜单将下来并显示隐藏的 DIV。
这里是my website。
我试图准确地复制 div 和 JQuery 的结构，但到目前为止还没有成功。 RSVP 链接所做的只是向上滚动网站，但我需要它来将标题向下推，以便显示其他 div。我将所有 ID 与 JQuery 匹配，所以我不知所措。我是 JQuery 的初学者，所以我不确定是否需要更改任何内容。这是调用 JQuery 的 Header.php。抱歉，这是我第一次使用 Stack，所以我不知道我是否应该粘贴我所有的源代码。
如果你使用 firebug 禁用 'top:-115px;' css 行你应该能够看到应该出现的内容：
#header {top: -115px !important;}
另外，值得一提的是，这是一个 wordpress 主题，因此结构由 .php 页面组成。
....
<!--Jquery-->
<script type="text/javascript" src="http://mktietheknot.com/wp-content/themes/Retro/js/copycat/default.js"></script>
</head>
<body <?php body_class(); ?>>
<!-- BEGIN HEADER -->
<div id="header" class="open" style="top: 0px;">
<div class="wrap">
<div id="rsvp">
<div class="inside">
<h1 style="font-family: 'Arvo'; display:block;">RSVP</h1>
<form id="rsvp-form" action="/wp-content/themes/Retro/rsvp-process.php" method="post">
<div class="another-wrap">
<div class="input-wrap">
<label for="name">Your Name:</label>
<input class="text" name="name" id="name" type="text">
</div>
<div class="input-wrap">
<label for="guest-names">Name of Guest(s): <span class="fineprint">optional</span></label>
<input class="text" name="guest-names" id="guest-names" type="text">
</div>
<div class="input-wrap">
<label for="number-attending"># Attending:</label>
<input class="text" name="number-attending" id="number-attending" type="text">
</div>
<input class="submit" name="submit" value="Submit" type="submit">
</div>
<p><span style="color:#000000;">For any question please Email: </span>
<a href="mailto:test@gmail.com">test@gmail.com</a></p>
</form>
<a href="#rsvp" class="rsvp-link">Close</a>
</div>
</div><!--EndRSVP-->
<div class="section_inn" align="center"><!--NotOriginal-->
<div id="menu">
<ul id="nav" class="nav">
<li class="first">
<a href="<?php echo home_url(); ?>/#about_section">
<?php echo retro_filter( get_theme_option('about_label') ); ?></a>
</li>
<li class="second">
<a href="<?php echo home_url(); ?>/#portfolio_section">
<?php echo retro_filter( get_theme_option('portfolio_label') ); ?></a>
</li>
<li class="third">
<a href="<?php echo home_url(); ?>/#blog_section">
<?php echo retro_filter( get_theme_option('blog_label') ); ?></a>
</li>
<li id="nav-rsvp" class="last">
<a href="#rsvp">RSVP</a>
</li>
</ul>
<div class="clr"></div>
<?php if ( get_theme_option('logo') ) : ?>
<!-- Logo -->
<div id="top_logo">
<a href="<?php echo home_url(); ?>/#home_section">
<img src="<?php echo get_theme_option('logo'); ?>" alt="" /></a>
</div>
<?php endif; ?>
<div class="clr"></div>
</div><!--EndMenu-->
</div><!--EndSectionInn-->
</div><!--EndWrap-->
</div><!--EndHeader-->
这里是 JQuery 本身：
$(document).ready(function() {
jQuery.timer = function(time,func,callback){
var a = {timer:setTimeout(func,time),callback:null}
if(typeof(callback) == 'function'){a.callback = callback;}
return a;
};
jQuery.clearTimer = function(a){
clearTimeout(a.timer);
if(typeof(a.callback) == 'function'){a.callback();};
return this;
};
// RSVP Form Submit
$('#rsvp .submit').click(function(){
$('#rsvp .submit').hide();
});
$(function(){
$("#rsvp-form").submit(function(){
dataString = $("#rsvp-form").serialize();
$('#rsvp-form .error').remove()
//var form_html = $("#rsvp-form");
//console.debug(form_html);
//$('#rsvp-form').fadeOut();
$.ajax({
type: "POST",
url: "http://mktietheknot.com/wp-content/themes/Retro/rsvp-process.php",
data: dataString,
dataType: "json",
success: function(data) {
if ( data.status == 'pass' ) {
$('#rsvp-form').fadeOut(function(){
$('#rsvp-form').html('<div class="rsvp-received">' +data.response+ '</div>').fadeIn(1000);
});
myTimer = $.timer(2500,function(){
$('#rsvp .rsvp-link').click();
});
}
else {
$('#rsvp-form').append('<div class="error">' +data.response+ '</div>');
$('#rsvp .submit').fadeIn('500');
console.debug(data);
}
}
});
return false;
});
});
$(function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
$('#nav-rsvp a').unbind();
$('#nav-rsvp a, .rsvp-link').click(function(){
if ( $('#header').hasClass('open') ) {
$('#header').animate({
top: '-=115'
}, 750, 'easeInOutCubic');
$('#header').removeClass('open');
}
else {
$('#header').animate({
top: '+=115'
}, 750, 'easeInOutCubic');
$('#header').addClass('open');
}
return false;
});
});
【问题讨论】：
-
当我试图点击这个链接时，我得到了一些错误。首先是 js 特定的“$ 未定义” - 你加载 jQuery 库吗？ @其他错误是404。
-
我想我正在页面底部加载 jQuery 库。我做了一些他们建议的更改。是不是还在报错？
-
您可以自己查看。使用 Chrome 并按 F12。单击控制台并查看。 mozila 使用 Ctrl+Shift+J 打开控制台。
-
谢谢，我明白你的意思了