无法使用JQuery隐藏DIV出现 [英] Can't get hidden DIV to appear using JQuery
问题描述
当您点击RSVP链接时，我试图模仿对此网站的影响。效果是隐藏的DIV效果，其中如果您单击RSVP链接，主菜单将下来并显示隐藏的DIV。
I'm trying to imitate the effect on this website when you click the "RSVP" link. The effect is a hidden DIV effect where if you click the RSVP link, the main menu will come down and reveal the hidden DIV.
这里是我的网站。
我试图复制div和jQuery的结构，没有运气到目前为止。所有的RSVP链接都是滚动网站，但我需要它，将标题下来，所以其他div将显示。我匹配所有的ID与JQuery，所以我在亏损。我是一个初学者与JQuery所以我不知道如果我需要改变任何东西。这是调用JQuery的Header.php。对不起，这是我第一次使用Stack，所以我不知道是否应该粘贴我的所有源代码。
I have tried to copy the structure of the div's and JQuery exactly, but no luck so far. All the RSVP link does is scroll the website up, but I need it to push the header down so the other div will show up. I matched all of the ID's with the JQuery so I am at a loss. I am a beginner with JQuery so I am not sure if I need to change anything. Here is the Header.php that is calling the JQuery. Sorry guys this is my first time using Stack so I don't know if I was supposed to paste in all of my source code.
如果你使用firebug来禁用'top：-115px;'css line你应该可以看到应该出现什么：
If you use firebug to disable the 'top:-115px;' css line you should be able to see what is supposed to appear:
#header {top: -115px !important;}
此外，值得一提的是，这是一个wordpress主题，所以结构由.php页面组成。
Also, it might be worth mentioning that this is a wordpress theme so the structure is made up of .php pages.
....
<!--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本身：
And here is the JQuery itself:
$(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;
});
});
推荐答案
Wordpress与jQuery没有冲突。你需要改变你的jQuery允许这个。看看这个：
Wordpress has a no-conflict with jQuery. You need to alter your jQuery to allow for this. Take a look at this:
jQuery Uncaught TypeError：object [object Window]的属性'$'不是函数。
这应该至少让你指向正确的方向。除此之外，您需要在default.js文件之前声明jQuery库。它目前在您的WP页脚。
That should at least get you pointed in the right direction. In addition to that, you need to declare the jQuery library before your default.js file. It's currently in your WP Footer.
这篇关于无法使用JQuery隐藏DIV出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
