Question

当您点击＆＃34; RSVP＆＃34;时，我试图模仿this website上的效果。链接。效果是隐藏的DIV效果，如果您单击RSVP链接，主菜单将会关闭并显示隐藏的DIV。

我试图完全复制div和JQuery的结构，但到目前为止还没有运气。所有的RSVP链接都会向上滚动网站，但是我需要它将标题向下推，以便显示另一个div。我将所有ID与JQuery相匹配，所以我很茫然。我是JQuery的初学者所以我不确定我是否需要改变任何东西。这是调用JQuery的Header.php。抱歉，这是我第一次使用Stack，所以我不知道是否应该粘贴我的所有源代码。

如果你使用firebug来禁用＆＃39; top：-115px;＆＃39; 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;
  });

});

Answer 1

Wordpress与jQuery没有冲突。你需要改变你的jQuery以允许这个。看看这个：

jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

至少应该让你指出正确的方向。除此之外，您还需要在default.js文件之前声明jQuery库。它目前在你的WP Footer中。

Answer 2

首先，关注订婚。

其次，你开始在default.js文件中使用jquery东西，但是在页面底部之前你不要包含jquery。

将jquery放在default.js文件上方的顶部。

编辑：用这个

包装你的default.js文件的内容

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

由于jQuery对象仍然可用，我们围绕您的代码创建一个函数，并将jQuery作为$传递。

无法使用JQuery显示隐藏的DIV

2 个答案: