手風琴沒有關閉 - Javascript

Question

我的手風琴作品迄今爲止通過打開和關閉標籤，但無法使所有標籤關閉。當我嘗試關閉最後一個選項卡時，它會自動擴展，這不是我想要的。

任何人都可以告訴我如何修改我的代碼，以便可以單獨關閉所有選項卡？

我認爲這可能與我的JavaScript有關。

這裏是手風琴的JS小提琴https://jsfiddle.net/wf2goy8s/

jQuery(document).ready(function($) { 
    var main_blc = $('.main-blc-accord'); 
    main_blc.find('dd').hide(); 
    main_blc.find('dd').prev().addClass('plus') 
    main_blc.find('dd').first().prev().removeClass('plus'); 
    main_blc.find('dd').first().show(); 

    main_blc.find('dt').on('click', function(event) { 
     main_blc.find('dd').hide(); 
     main_blc.find('dt').addClass('plus'); 
     $(this).next('dd').toggle('400', function(){ 
      $(this).prev().removeClass('plus'); 
     }); 
    }); 

    $('.mobile-btn-menu').find('span').on('click', function(event) { 
      $(this).parent().next('.footer-menu').toggleClass('show'); 
    }); 
}); 

這裏是我的html代碼： -

<div class="container has-shadow acardion-blc"> 
<h2 class="clearfix">Our self-build mortgage information</h2> 
<dl class="main-blc-accord"> 
    <dt> 
     <h3>Key features</h3> 
    </dt> 
    <dd> 
     <ul class="square-list"> 
      <li><span>We provide a straightforward, individual self-build service for eco-friendly properties and projects </span></li> 
      <li><span>We don’t assess based on a tick box approach - we welcome non standard construction types, including timber framed builds </span></li> 
      <li><span>Our Standard Variable Rate is 4.9%. The overall cost for comparison is <strong>5.0% APR </strong></span></li> 
      <li><span>Energy efficient homes are rewarded with discounts off our Standard Variable Rate that are called C-Change Discounts – see how they work, below</span></li> 
      <li><span>An early repayment charge may be payable if you repay all or part of your mortgage within the first two years </span></li> 
      <li><span>Mortgages are available on a repayment, interest-only and part (repayment) and part (interest-only) basis</span></li> 
      <li><span>You can borrow up to 90% of the property’s value on a repayment basis or up to 75% interest-only and part (repayment) and part interest-only</span></li> 
      <li><span>Interest-only and part interest-only mortgages are subject to an acceptable repayment vehicle</span></li> 
     </ul> 
    </dd> 
    <dt> 
     <h3>Frequently asked questions</h3> 
    </dt> 
    <dd> 
     <ul class="list"> 
      <li> 
       <h4>Do I need to provide planning permission for my self-build?</h4> 
       <p>Yes. We need at least outline planning permission to start the application process and detailed planning permission before the mortgage is released.</p> 
      </li> 
      <li> 
       <h4>What information do I need to progress a mortgage application?</h4> 
       <p>You’ll need to have a specific plot and build in mind which needs to be supported by detailed plans, including a breakdown of material and labour costs and an indication of the energy standard you are building to.</p> 
      </li> 
      <li> 
       <h4>What deposit do I need for my self-build?</h4> 
       <p>You need a 10% minimum deposit to buy the land and a further 15% – 20% of total build costs to start your build.</p> 
      </li> 
      <li> 
       <h4>Do I still need a deposit for my self-build if I already own the land and have planning permission?</h4> 
       <p>No, you don’t always need a deposit; we can lend based on the value of your land to start the build, providing you already own the land and it’s mortgage-free. Also, if you need us to, we can help you repay any outstanding finance on the land.</p> 
      </li> 
      <li> 
       <h4>Do you lend on buying the plot/land only?</h4> 
       <p>We don’t just lend on a plot/land purchase. Any project we support needs to show planning details of the proposed build with an indication of the energy standard you are building to, and how the build costs are expected to be funded with savings and mortgage finance.</p> 
      </li> 
      <li> 
       <h4>How long do I have to complete the build?</h4> 
       <p>Subject to planning constraints, we allow a maximum of 2 years for you to complete the new-build, although we encourage you to complete earlier to benefit from our C-Change discounts. A reduced standard variable rate is likely to apply when your property is complete and you provide us with the certification of the energy standard you have built to.</p> 
      </li> 
      <li> 
       <h4>Do you offer stage payments for a self-build?</h4> 
       <p>Yes, although the Ecology self-build mortgage does not release payments at set construction milestone stages (e.g. foundation, wall plate etc). We release funds as and when the build progresses and release up to a percentage of the increased value of the property.</p> 
      </li> 
      <li> 
       <h4>Can I have interest-only during the build phase?</h4> 
       <p>We offer an interest-only mortgage only when you have a qualifying repayment vehicle to support this for example an ISA, endowment or Pension Plan.</p> 
      </li> 
      <li> 
       <h4>Do I require a particular build warranty on completion of my self-build?</h4> 
       <p>A build warranty is not a mandatory lending requirement of our mortgage and we are happy with a Building Regulation Completion Certificate. However, if you wish to take out a build warranty for the completion of the property then this is acceptable to the Society.</p> 
      </li> 
      <li> 
       <h4>Does the self-build property have to be your main residence?</h4> 
       <p>Yes, although we do offer a buy to let mortgage. Please bear in mind that the property can’t be a second or holiday home or classed as mobile planning.</p> 
      </li> 
      <li> 
       <h4>Do you do mortgages for property renovations or conversions that are eco-friendly?</h4> 
       <p>Yes, we do mortgages for other types of projects. Find details on what we lend on here.</p> 
      </li> 
      <li> 
       <h4>Do you do mortgages for Housing Associations or Housing Cooperatives?</h4> 
       <p>Yes, we do mortgages for Housing Associations or Housing Cooperatives please see links.</p> 
      </li> 
     </ul> 
    </dd> 
    <dt> 
     <h3>Our fees</h3> 
    </dt> 
    <dd> 
     <div class="respons-table"> 
      <table class="tg"> 
       <tr> 
        <th class="tg-r3fc" colspan="3">Residential mortgage valuation fees</th> 
       </tr> 
       <tr> 
        <td class="tg-sddl">Value of property not exceeding</td> 
        <td class="tg-sddl">Fee</td> 
        <td class="tg-sddl">Notes</td> 
       </tr> 
       <tr> 
        <td class="tg-vl14 fix-width-one ">£100,000</td> 
        <td class="tg-vl14">£180</td> 
        <td class="tg-vl14 fix-width-theer" rowspan="6"> 
         <strong>Please note these fees apply to residential and buy-to-let applications.</strong><br><br> 
         <p>In all other instances, the fee required will be determined on a case-by-case basis.</p> 
         <p> 
          A more detailed inspection, such as a Homebuyers Report can often be 
          provided by the same valuer at a fee to be negotiated. Please advise on this point when submitting your application. 
          Depending on the nature of the property, the fee required may on occasion differ from this scale. Valuation fees include VAT. 
         </p> 
        </td> 
       </tr> 
       <tr> 
        <td class="tg-vl14">£150,000</td> 
        <td class="tg-vl14">£180</td> 
       </tr> 
       <tr> 
        <td class="tg-vl14">£200,000</td> 
        <td class="tg-vl14">£240</td> 
       </tr> 
       <tr> 
        <td class="tg-vl14">£250,000</td> 
        <td class="tg-vl14">£270</td> 
       </tr> 
       <tr> 
        <td class="tg-vl14">£300,000</td> 
        <td class="tg-vl14">£300</td> 
       </tr> 
       <tr> 
        <td class="tg-vl14">Up to each £50,000 thereafter add</td> 
        <td class="tg-vl14">£30</td> 
       </tr> 
      </table> 
     </div> 
     <div class="simle-text"> 
      The Society reserves the right to amend exisiting services and charges, or to introduce new ones. <br> 
      Any change to charges will only reflect the increased operational costs of providing the service. You will always be notified before any changes are implemented. 
     </div> 
    </dd> 
</dl> 

Answer 1

試試這個代碼： -

jQuery(document).ready(function($) { 
var main_blc = $('.main-blc-accord'); 
main_blc.find('dd').hide(); 
main_blc.find('dd').prev().addClass('plus') 
main_blc.find('dd').first().prev().removeClass('plus'); 
main_blc.find('dd').first().show(); 

main_blc.find('dt').on('click', function(event) { 
    var dd=$(this).next('dd'); 
    main_blc.find('dd').not(dd).slideUp('slow');   
    dd.slideToggle(); 
    $(this).toggleClass('plus');  
}); 

    $('.mobile-btn-menu').find('span').on('click', function(event) { 
     $(this).parent().next('.footer-menu').toggleClass('show'); 
    }); 
}); 

Demo

Answer 2

我寫了一個更有效的解決方案。 檢查了這一點： demo

function accordion(e) { 
    var targ = $(e.target),    //save button 
     d = e.data,      //save data object 
     o = d.opened;      //save open state 
    if (o) {        //if opened 
     targ.html("+");      //change button 
     d.article.slideUp("1s");    //close article 
     openElement = undefined;    //register closing 
    } else {        //if closed 
     targ.html("-");      //change button 
     d.article.slideDown("1s");   //open article 
     if (openElement) openElement.click(); // close last opened 
     openElement = targ;     //register opening 
    } 
    d.opened = !o;      //change open state 
} 

var x = $(".open"),      //save opening buttons 
    openElement;       //save last opened article(undefined) 
for (var i=0, l=x.length; i<l;i++) {  //iterate buttons 
    var atc = x.eq(i).next().nextAll();  //save related articles 
    atc.hide();        //hide articles 
    x.eq(i).html("+");      //create related buttons 
    x.eq(i).on("click",{article : atc, opened : false},accordion);//add click event listener 
}            
x.first().click();      //open first article