Can't get hidden DIV to appear using JQuery

2019-08-22 18:19发布

站内问答 / jQuery
547 2 5

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.

Here is my website.

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.

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;}

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-->

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;
  });

});

2条回答
女痞
2楼-- · 2019-08-22 18:28

First off, grats on the engagement.

Second, you start using jquery stuff in your default.js file, but you dont include jquery until the bottom of the page.

Put jquery at the top, above your default.js file.

edit: wrap the contents of your default.js file with this

(function($){
    //stuff goes here
})(jQuery);

Since the jQuery object is still usable, we create a function around your code and pass jQuery in as $.

查看更多
0人赞 添加讨论(0) 举报
手持菜刀，她持情操
3楼-- · 2019-08-22 18:43

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: Property '$' of object [object Window] is not a function.

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)