个人中心
gpt4 book ai didi

jquery - 无法使用 JQuery 显示隐藏的 DIV

转载 作者：太空宇宙 更新时间：2023-11-04 04:40:56 25 4
gpt4 key购买 nike

我正在尝试模仿 this website 上的效果当您单击“RSVP”链接时。该效果是一个隐藏的 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;
  });

});

最佳答案

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

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

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

关于jquery - 无法使用 JQuery 显示隐藏的 DIV，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15488267/

25 4 0
文章推荐： c - 在嵌入式 C 中使用 RTOS 处理多任务文件系统的最佳方法？
文章推荐： c - Atmega168 I2C 作为主机
文章推荐： c - Cuda by Example 中非常简单的教程的问题
文章推荐： linux - 为什么我在 Mac OS Yosemite 10.10.1 下无法 ping 通/etc/hosts 中的特定主机名？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com