javascript - Accordion 打开页面上的所有 Accordion ，再次单击时不会折叠。

Question

我正在处理一个刚刚添加了 Accordion 的页面。它有几个不同的 Accordion ，当单击其中任何一个时，所有 Accordion 都会打开。再次单击 Accordion 时，它应该折叠，但它似乎只是重新加载代码并保持所有 Accordion 打开。

$(document).ready(function() {
  function close_accordion_section() {
    $('.accordion .accordion-section-title').removeClass('active');
    $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
  }

  $('.accordion-section-title').click(function(e) {
    // Grab current anchor value
    var currentAttrValue = $(this).attr('href');

    if ($(e.target).is('.active')) {
      close_accordion_section();
    } else {
      close_accordion_section();

      // Add active class to section title
      $(this).addClass('active');
      // Open up the hidden content panel
      $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
    }

    e.preventDefault();
  });
});

	/*----- Accordion -----*/
	.accordion,
	.accordion * {
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	}
	.accordion {
	  overflow: hidden;
	  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
	  border-radius: 3px;
	  background: #3bb54a;
	}
	/*----- Section Titles -----*/
	.accordion-section-title {
	  width: 100%;
	  padding: 15px;
	  display: inline-block;
	  border-bottom: 1px solid #1a1a1a;
	  background: #FFF;
	  transition: all linear 0.15s;
	  /* Type */
	  font-size: 1.200em;
	  text-shadow: 0px 1px 0px #1a1a1a;
	  color: #fff;
	}
	.accordion-section-title.active,
	.accordion-section-title:hover {
	  background: #FBCB34;
	  /* Type */
	  text-decoration: none;
	}
	.accordion-section:last-child .accordion-section-title {
	  border-bottom: none;
	}
	/*----- Section Content -----*/
	.accordion-section-content {
	  padding: 15px;
	  display: none;
	}
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1"><h3 class="portseparator">Museums &amp; History</h3></a>

    <div id="accordion-1" class="accordion-section-content">

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lighthouse.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lighthouse.JPG" style="width:100%;height:auto;" alt="St. Augustine Lighthouse & Maritime Museum">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.staugustinelighthouse.com/">St. Augustine Lighthouse &amp; Maritime Museum</a></h3>

          <p>America’s history will never look the same after a visit to the St. Augustine Lighthouse &amp; Maritime Museum. From the breathtaking views of Northeast Florida to the artifacts recovered from our ancestors’ vessels, the St. Augustine Lighthouse
            &amp; Maritime Museum covers centuries of history from in and around St. Augustine.
          </p>

          <h5><a target="_blank" href="http://www.staugustinelighthouse.com/">Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-fortmatazanas.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-fortmatazanas.JPG" style="width:100%;height:auto;" alt="Fort Matanzas National Monument">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.nps.gov/foma/">Fort Matanzas National Monument</a></h3>

          <p>Coastal Florida was a major field of conflict as European nations fought for control in the New World. As part of this struggle, Fort Matanzas guarded St. Augustine’s southern river approach. The colonial wars are over, but the monument is still
            protecting—not just the historic fort, but also the wild barrier island and the plants and animals who survive there amidst a sea of modern development.</p>

          <h5><a target="_blank" href="http://www.nps.gov/foma/">Click here for more information!</a></h5>

        </div>
      </div>


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-casillodesanmarcos.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-casillodesanmarcos.JPG" style="width:100%;height:auto;" alt="Castillo de San Marcos">
          </a>


        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.nps.gov/casa/index.htm">Castillo de San Marcos</a></h3>

          <p>A monument not only of stone and mortar but of human determination and endurance, the Castillo de San Marcos symbolizes the clash between cultures which ultimately resulted in our uniquely unified nation. Still resonant with the struggles of
            an earlier time, these original walls provide tangible evidence of America’s grim but remarkable history.</p>

          <h5><a target="_blank" href="http://www.nps.gov/casa/index.htm">Click here for more information!</a></h5>

        </div>
      </div>


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-pirate&treasure.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-pirate&treasure.JPG" style="width:100%;height:auto;" alt="St. Augustine Pirate & Treasure Museum">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://thepiratemuseum.com">St. Augustine Pirate &amp; Treasure Museum</a></h3>

          <p>In addition to the world class museum, the property boasts a scenic outdoor courtyard and a large deck that overlooks the historic Matanzas River and the magnificent Castillo de San Marcos, the 17th Spanish fort located directly across the street
            on the bayfront. The museum spans about 5,000 square ft. with a 1,300-square.-ft. courtyard and an approximate 500-square-ft. upper deck. There are several event packages to choose from that also include museum access.</p>

          <h5><a target="_blank" href="http://www.thepiratemuseum.com">Click here for more information!</a></h5>

        </div>
      </div>

    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->



<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1">
      <h3 class="portseparator">State Parks &amp; Recreation</h3>
    </a>

    <div id="accordion-1" class="accordion-section-content">


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-wildlifereserve.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-wildlifereserve.JPG" style="width:100%;height:auto;" alt="St. Augustine Wild Reserve">
          </a>


        </div>
        <div class="col-md-6">
          <h3><a href="http://www.staugustinewildreserve.org">St. Augustine Wild Reserve</a></h3>

          <p>Guests will be given a guided tour of the 7-acre animal compound by an experienced wildlife professional. An introduction to each species, basic biology, and how the animal arrived at the sanctuary will be discussed in detail. Visitors will
            be allowed within 5-10 feet of the exotic animals, which are housed in secure habitats. On the tour there will be tigers, an American black bear, cougars, lynxes, leopards, wolves, and a host of other animals.
          </p>

          <h5><a href="http://www.staugustinewildreserve.org">  Click here for more information!</a></h5>

        </div>
      </div>



      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-anastasiastatepark.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-anastasiastatepark.JPG" style="width:100%;height:auto;" alt="Anastasia State Park">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="https://www.floridastateparks.org/park/anastasia">Anastasia State Park</a></h3>

          <p>Anastasia State Park includes 1,600 acres of rich ecosystems and abundant wildlife. Explore up to four miles of pristine beach, the estuarine tidal marsh teeming with plant and animal life, or the self-guided nature trail which takes you through
            the maritime hammock and onto ancient sand dunes. You can also visit the Coquina Quarry, an archaeological site where coquina rock was mined to help construct the nearby Castillo de San Marcos National Monument, earning it a spot on the National
            Register of Historic Places.</p>

          <h5><a target="_blank" href="https://www.floridastateparks.org/park/anastasia">Click here for more information!</a></h5>

        </div>
      </div>


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-alligatorfarm.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-alligatorfarm.JPG" style="width:100%;height:auto;" alt="Coming Soon">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.alligatorfarm.com/">St. Augustine Alligator Farm Zoological Park</a></h3>

          <p>The St. Augustine Alligator Farm Zoological Park is one of Florida&#146;s oldest continuously running attractions, having opened on May 20, 1893. Not only does it have 23 species of crocodilians, but also a variety of other reptiles, mammals,
            and birds, as well as exhibits, animal performances and educational demonstrations.
          </p>

          <h5><a target="_blank" href="http://www.alligatorfarm.com">Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-beach.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-beach.JPG" style="width:100%;height:auto;" alt="St. Augustine Beach">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.staugustinelighthouse.com/">St. Augustine Beach</a></h3>

          <p>St. Augustine&#146;s beaches stretch from Vilano Beach north of the city to Crescent Beach in the south. The Intracoastal Waterway naturally divides the mainland from the barrier islands with their miles of gorgeous coastline with many public
            areas for beach recreation and relaxation.</p>

          <h5><a target="_blank" href="http://www.oldcity.com/beaches">Click here for more information!</a></h5>

        </div>
      </div>



    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->


<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1"><h3  class="portseparator">Local Golf Courses</h3></a>

    <div id="accordion-1" class="accordion-section-content">


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stjohns.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stjohns.JPG" style="width:100%;height:auto;" alt="St. Johns Golf  &amp; Country Club">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.stjohnsgolf.com">St. Johns Golf  &amp; Country Club</a></h3>

          <p>St. Johns Golf &amp; Country Club is an extraordinary place located between St. Augustine and Jacksonville. The 18-hole Clyde Johnston-designed course is the community&#146;s centerpiece with just the right amount of challenge for novice and
            avid golfers alike. A great place to hone your skills, St. Johns is known for its consistent quality of service and conditions.</p>

          <h5><a target="_blank" href="http:/www.stjohnsgolf.com">Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-southampton.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-southampton.JPG" style="width:100%;height:auto;" alt="South Hampton Golf Club">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.golfsouthhampton.com/">South Hampton Golf Club</a></h3>

          <p>The course has 16 lakes and over 60 bunkers, but the layout is fair. The back nine is a bit more adventurous so do your scoring on the front nine. There is a great variety of holes and you will not be bored playing here. The course is now family
            owned and all the staff are very friendly and helpful. You can’t go wrong playing here as the rates are very reasonable and the course challenging and interesting.</p>

          <h5><a target="_blank" href="http:/www.golfsouthhampton.com/">Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-royalgolf.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-royalgolf.JPG" style="width:100%;height:auto;" alt="Royal St. Augustine Golf &amp; Country Club">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.royalstaugustinegolf.com/">Royal St. Augustine Golf Club</a></h3>

          <p>If you are looking for a course close to downtown, Royal St Augustine is it. The conditions are generally good here and the staff is friendly. This is a very tight golf course and if you are even slightly off the fairways, kiss that golf ball
            goodbye. Two fairways line the road, if your tee shot missed the narrow fairway, your next shot is from the passing lane of Route 16. However if you want to tee it up near town on a well maintained course, this is a good choice. Just bring
            plenty of balls, and a straight tee shot.</p>

          <h5><a target="_blank" href="http://www.royalstaugustinegolf.com/">Click here for more information!</a></h5>

        </div>
      </div>


    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1"><h4 class="portseparator">Food &amp; Entertainment</h4></a>

    <div id="accordion-1" class="accordion-section-content">


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-staugustinedistillery.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-staugustinedistillery.JPG" style="width:100%;height:auto;" alt="St. Augustine Distillery Company">
          </a>


        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.staugustinedistillery.com">St. Augustine Distillery Company</a></h3>

          <p>Take a free tour of the distillery and watch as they mix, mash, cook and distill small batch vodka, rum, gin and whiskey in a historically renovated ice manufacturing plant from 1917. You will learn about the history of ice and distilling in
            Florida, see the products being made, and then taste their small batch spirits for yourself in the tasting room. There’s no charge and tours are every 30 minutes. Come on by!</p>

          <h5><a target="_blank" href="http://www.staugustinedistillery.com">  Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-sansabastienwine.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-sansabastienwine.JPG" style="width:100%;height:auto;" alt="San Sebastian Winery">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.sansebastianwinery.com/">San Sebastian Winery</a></h3>

          <p>Today, San Sebastian ranks as one of Florida&#146;s premium wineries, and remains a pioneer in the development of table, sparkling, and dessert wines from hybrid and muscadine grapes. Vintage-dated varietals from hybrids such as Stover and Blanc
            Du Bois are produced and marketed along with blended and sparkling wines from native Muscadine grapes. Port and Cream Sherry dessert wines are also produced by and sold under the San Sebastian brand.</p>

          <h5><a target="_blank" href="http://www.sansebastianwinery.com/">  Click here for more information!</a></h5>

        </div>
      </div>



    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->














<a class="anchorlink" id="events" a name="events"></a>
<h3 class="title">Area Events</h3>

<p style="color:#0071bc;font-size:1.65em;">St. Augustine is a venue for all types of events large and small, historical and modern, educational and entertaining. Featured events in St. Augustine include annual headliners at the Amphitheatre, exciting new art exhibits, local festivals, seasonal
  celebrations for holidays, and many other major occasions in the city, including the 450th commemoration. St. Augustine welcomes thousands of visitors every year for the many events it hosts. These include one of the most celebrated, the Nights of Lights,
  to more local events like the Music by the Sea concerts.</p>



<div class="accordion">
  <div class="accordion-section">
    <a class="accordion-section-title" href="#accordion-1"><h4 class="portseparator">Area Events</h4></a>

    <div id="accordion-1" class="accordion-section-content">



      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-farmersmarket.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-farmersmarket.JPG" style="width:100%;height:auto;" alt="Third Saturdays Nocatee Farmers Market">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.nocatee.com/">Third Saturdays Nocatee Farmers&#146; Market</a></h3>
          <h4>February 20, 2016 to December 17, 2016</h4>

          <p>Nocatee Farmer&#146;s Market takes place from 10:00AM - 2:00PM every third Saturday. This free family-friendly event has over 80 local vendors selling everything from produce, crafts, jewelry, herbs, unique foods and more. Free face painting
            will be available for the little ones, along with a bounce house.</p>

          <h5><a target="_blank" href="http://www.nocatee.com/">Click here for more information!</a></h5>

        </div>
      </div>


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-cathedralfestival.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-cathedralfestival.JPG" style="width:100%;height:auto;" alt="Cathedral Festival">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://augustine.com/event/cathedral-festival">Cathedral Festival</a></h3>
          <h4>Friday – Sunday, February 26 - 28, 2016</h4>

          <p>The 31st Annual Cathedral Festival at the Mission of Nombre de Dios grounds offers fun for the whole family. Located near the giant cross in St. Augustine, visitors are welcome to enjoy the fun rides, games, raffles, bingo, food and art vendors,
            fireworks and more. Families will enjoy exciting midway rides that are thrilling for all ages including a Ferris wheel, slides and much more.</p>

          <h5><a target="_blank" href="http://augustine.com/event/cathedral-festival">Click here for more information!</a></h5>

        </div>
      </div>


      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lionsseafoodfestival.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-lionsseafoodfestival.JPG" style="width:100%;height:auto;" alt="St. Augustine's Lion Seafood Festival">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://augustine.com/event/st-augustine-lions-seafood-festival">St. Augustine&#146;s Lion Seafood Festival</a></h3>
          <h4>March 4 - 6, 2016</h4>

          <p>The 35th Annual St. Augustine Lions Seafood Festival features delicious seafood, arts and crafts, live music, family activities, and much more. The festival takes place at Francis Field, Friday – Sunday, March 4 – 6, 2016.</p>

          <h5><a target="_blank" href="http://augustine.com/event/st-augustine-lions-seafood-festival">Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stpattys.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-stpattys.JPG" style="width:100%;height:auto;" alt="St. Patrick’s Day Parade">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.celticstaugustine.com/st-patricks-day-parade/">St. Patrick’s Day Parade</a></h3>
          <h4>March 12, 2016</h4> 

          <p>St. Augustine’s St. Patrick Day Parade is the ONLY St. Patrick’s Day Parade in Northeast Florida. The Parade is an annual celebration of St. Augustine’s Celtic heritage and the Emerald Isle’s most revered saint. With over 800 participants and
            thousands of spectators, lads and lasses converge upon the Ancient City each year doning their tartans and green attire.</p>

          <h5><a target="_blank" href="http://www.celticstaugustine.com/st-patricks-day-parade/">Click here for more information!</a></h5>

        </div>
      </div>



      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-bbqfestival.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-bbqfestival.JPG" style="width:100%;height:auto;" alt="Rhythm & Ribs Festival">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://augustine.com/event/rhythm-ribs-festival">Rhythm &amp; Ribs Festival</a></h3>
          <h4>Friday - Sunday, April 1 - 3, 2016</h4>

          <p>The 21st Annual Rhythm &amp; Ribs Festival celebrates delicious barbecue, music and good times with live entertainment and local chefs competing for the best BBQ. This festival includes great live music throughout the weekend, people’s BBQ choice
            awards, a kids zone, mechanical bull, an array of vendors, and much more.</p>

          <h5><a target="_blank" href="http://augustine.com/event/rhythm-ribs-festival">Click here for more information!</a></h5>

        </div>
      </div>

      <div class="col-md-12 portfolio">

        <div class="col-md-6" style="text-align:center;">
          <a href="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-romanza.JPG" data-featherlight="image">
            <img src="assets/css/images/AlexImages/compass-rv-park-st.%20augustine-romanza.JPG" style="width:100%;height:auto;" alt="Coming Soon">
          </a>
        </div>
        <div class="col-md-6">
          <h3><a target="_blank" href="http://www.see-staugustine.com/events/romanza-festivale-in-st-augustine-2016-05-08/#.VraiH9A_u9U">Romanza Festivale in St. Augustine</a></h3>
          <h4>May 6 - 15, 2016</h4>

          <p>Come to Saint Augustine from May 6 through the 15, 2016 for a celebration of art and music in the Nation’s oldest city featuring more than 60 events and exhibits by dozens of organizations. Daily events include music and dance performances,
            concerts, art shows, dramatic productions and much more at locations throughout the city.</p>

          <h5><a target="_blank" href="http://www.see-staugustine.com/events/romanza-festivale-in-st-augustine-2016-05-08/#.VraiH9A_u9U">Click here for more information!</a></h5>

        </div>
      </div>





     


    </div>
    <!--end .accordion-section-content-->
  </div>
  <!--end .accordion-section-->
</div>
<!--end .accordion-->

Answer 1

这是因为所有 Accordion 共享相同的 ID 属性 accordion-1。如果将它们更改为在 ID 末尾具有不同的数字，则每个开口都应该正常工作。

要解决关闭问题，您还需要将要关闭的 Accordion 的元素或 ID 传递到 close_accordion_section 函数中。否则它的目标是所有 Accordion 。例如

$(document).ready(function() {
    function close_accordion_section(element) {
        $(element).find('.accordion-section-title').removeClass('active');
        $(element).find('.accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if ($(this).is('.active')) {
            close_accordion_section($(e.target).closest('.accordion'));
        } else {
            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }

        e.preventDefault();
    });
});