javascript - 为什么隐藏/显示(slideup/slidedown)在这种情况下不起作用？

Question

以下是我的jsfiddle的链接 http://jsfiddle.net/mZ9L6/2/

代码如下:

<style type="text/css">
    {literal}
    .title {
      float:left;
      color: #4E4695;
      float: left;
      font: normal 13px arial;
      width: 100%;
      padding-bottom:4px;
      font-weight:bold;
    }
    /* -- SOF Enquiry Content --*/
    .accordion li {
      font-size: 1.4em;
      margin-bottom: 15px;
      margin-left: -40px;
    }
    .accordion li .rel-content {
      display: none;
      margin:20px 0 33px;
      padding-left: 18px;
    }
    .accordion li a {
      text-decoration: none;
    }
    {/literal}
    </style>

{literal}
<script language="javascript" type="text/javascript">
/* -- SOF Accordion --*/
function accordion(className){

  return className.each(function(){

  //$('.fnAccContent').hide();
  $(this).children('li').each(function(){

    if($(this).hasClass('fnClosed')){
      console.log($(this));
      $(this).children('.fnAccContent').hide(); 
    } else {
      if($(this).index() == 0){
        /*$(this).children('.fnAccContent').show();
        $(this).addClass('active');*/
        $(this).children('.fnAccContent').hide();
      } else {
      $(this).children('.fnAccContent').hide();
      } 
    }
    $(this).children('#first_ans').show();

  });

  var fnTrigger = $(this).children().children('.fnTrigger');

  fnTrigger.click(function(e){

    e.preventDefault();

    $(this).parent().toggleClass('active');

    if( $(this).next('.fnAccContent').is(':hidden') ) {
      $(this).next('.fnAccContent').slideDown();
      } else {
        $(this).next('.fnAccContent').slideUp();
      }      
    });
  });  

  //Set default open/close settings
  $('.acc_container').hide(); //Hide/close all containers
  $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

  //On Click
  $('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
      $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
      $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
  });
}

$(document).ready(function(){
  accordion($(".fnAccordion"));
  });
/* -- EOF Accordion --*/
</script>
{/literal}
<div class="breadcm">
  <ul class="links">
    <li><a href="{$site_url}">home</a></li>
    <li><a href="" class="currentpg">FAQ</a></li>
  </ul>
</div>
<div id="onlnpckg">
  <div class="pckglist" style="padding:0; width:996px">
    <div class="faq fl">
    <h2 class="heading">FAQ</h2>
      <div class="section fl">
        <div class="colbox" style="text-transform:none;">
          <h2>1. profile</h2>
          <div class="accordion">
            <ol class="fnAccordion" type="none">
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">1.1 What is my profile?</p></a>
                <div class="rel-content fnAccContent" id="first_ans">
                  <p class="ansr">My Profile is where you can see and update your personal information. This will help you in faster payment process because EntrancePrime will fetch your contact details from My Profile and auto fill on payment page.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">1.2 How can i update my profile?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “My Profile” from the “My Account” dropdown on the top right of your screen. You can update your details except the primary E-Mail Address.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">1.3 My E-mail ID has changed. How can i update the same?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">You can update your secondary e-mail id. All communication to you will be sent on Both – Primary and Secondary E-mail id. However, Your primary e-mail id will always remain your ligin id for EntrancePrime.</p>
                </div>
              </li>
            </ol>
          </div>
        </div>
        <div class="colbox">
          <h2>2. passwords</h2>
          <div class="accordion">
            <ol class="fnAccordion" type="none">
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">2.1 How can I change my password?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “Change Password” from the “My Account” dropdown on the top right of your screen. You can update your new password here.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">2.2 What if i Forgot my password how do i retrive it?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Click “Forgot Password”, Enter your email id and your password will be sent to your primary and secondary e-mail id.</p>
                </div>
              </li>
            </ol>
          </div>
        </div>
        <div class="colbox">
          <h2>3. my account related</h2>
          <h4 class="subheadg">3.1 login related queries</h4>
          <div class="accordion">
            <ol class="fnAccordion" type="none">
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">3.1.1 How can i login in to the website?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">On top right of your screen, enter your registered e-mail id and password. Refer to the Welcome email from EntrancePrime for Password.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">3.1.2 I am not able to login please help?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">You might be entering wrong e-mail and/or password. Please refer to the Welcome email from EntrancePrime for Password Or click forgot password to reset your password.</p>
               </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">3.1.3 How do i logout from the system?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">On top right of your screen, find the log out button and click it.</p>
                </div>
              </li>
            </ol>
          </div>
        </div>
        <div class="colbox">
          <h2>4. promotions subscriptions</h2>
          <div class="accordion">
            <ol class="fnAccordion" type="none">
              <li> 
                <a class="fnTrigger" href="#"><p class="quetn title">4.1 How do i subscribe for receiving newsletters / Promotions?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “My Profile” from the “My Account” dropdown on the top right of your screen. Check “I want to receive promotional E-mail and SMS”</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">4.2 How do i unsubscribe from receiving newsletters / Promotions?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “My Profile” from the “My Account” dropdown on the top right of your screen. Uncheck “I want to receive promotional E-mail and SMS”</p>
                </div>
              </li>
              <li>   
                <h4 class="subheadg">feedback &amp; suggetions</h4>
                <a class="fnTrigger" href="#"><p class="quetn title">4.3 How can i provide feedback or any suggestions?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Click “Contact us” and write to us. We love to hear from you.</p>
                </div>
              </li>
            </ol>
          </div>
        </div>
      </div>
      <div class="section fr">
        <div class="colbox">
          <h2>5. General</h2>
          <div class="accordion">
            <ol class="fnAccordion" type="none">
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.1 Are any free packages available?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">If there are any free packages available, you can find them on test package page. Try sorting by price – lowest first and you will see free packages on top.</p></div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.2 Do i need to register to take test?</p></a>
                <div class="rel-content fnAccContent">
                <p class="ansr">Yes. We need your details to send you your test score.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.3 What are the benefits of Registering on EP?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">By registering, you get access to all test packages, promotional e-mails and SMS, exam tips, exam schedules and above all, you join the growing online community of other test takers all over the country like you.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.4 How do i register on EP?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Find & click “Register now” button and follow the instructions.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.5 Where i can find my login details?</p></a>
                <div class="rel-content fnAccContent">
                <p class="ansr">Once you register, you will receive a welcome email from us. It contains your login details.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.6 How can i buy test packages?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you are logged in to your EntrancePrime account, click on “test packages”. Select the package you like and click “Add to Cart”. You can add multiple packages to cart and once you are ready to buy, Click “My Cart” on top right of your screen. You can now proceed to payment.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.7 How do I write testimonials?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Please use “contact us” for writing to us.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.8 How do i contact EP?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Please use “contact us” for writing to us.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.9 How do i make payment?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you are done adding packages to your cart, click “Proceed to Payment” and choose your preferred payment method. You can pay us by using our secure online payment gateway or even choose offline payment if you wish to make a traditional payment.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.10 What are the different payment options available?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">You can pay by using your credit card / debit card / net banking / cash card / mobile banking / Cheque / Demand Draft / Cash Deposit in Bank.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.11 Where can I find my payment details?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “Payment History” from the “My Account” dropdown on the top right of your screen. Click “View Details” to see transaction details.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.12 Where can i see my tests?</p></a>
                <div class="rel-content fnAccContent">
                <p class="ansr">Once you have logged in to your EntrancePrime account, select “My Tests” from the “My Account” dropdown on the top right of your screen.</p>
                </div>
              </li>
              <li>  
                <a class="fnTrigger" href="#"><p class="quetn title">5.13 Where do i find my test packages?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “My Packages” from the “My Account” dropdown on the top right of your screen.</p>
                </div>
              </li>
              <li>
                <a class="fnTrigger" href="#"><p class="quetn title">5.14 Where do i see my test results?</p></a>
                <div class="rel-content fnAccContent">
                  <p class="ansr">Once you have logged in to your EntrancePrime account, select “My Tests” from the “My Account” dropdown on the top right of your screen. Click “View Result” to see result of your attempted tests.</p> 
                </div>
              </li>  
            </ol>       
          </div>        
        </div>
      </div>
      <div id="securepaymnt" style="margin:0"><img width="998" height="117" alt=" " src="{$site_url}images_new/securepaymt.png"></div>
    </div>
  </div>
</div>

向上滑动和向下滑动应该能够顺利进行。你能帮我做这件事吗？ This link is a working reference.

Answer 1

请查看下面的演示。您忘记包含 Jquery 文件。不需要 fiddle 中的以下代码

<script language="javascript" type="text/javascript">

Demo