jQuery手风琴在第一次点击时不会打开

Question

我有一个手风琴设置，当你点击＆＃34;阅读更多＆＃34;更多信息显示和＆＃34;阅读更多＆＃34;更改为＆＃34;阅读更少＆＃34;。它应该工作，以便一次只打开一个部分。一切似乎都没问题，除非第一个手风琴是打开的，你点击第二个手风琴，然后第一个关闭，但第二个没有打开。您必须再次单击第二个才能打开它。如何进行制作，以便在单击第二个选项卡时，第一个选项卡关闭，第二个选项卡打开。

这是HTML： The Fiddle

＆＃13;

＆＃13;

var allPanels = jQuery('.plans > dd').addClass('hide');
var morelink = jQuery('.plans > dt > a');

jQuery('.plans > dt > a').click(function() {
  if (allPanels.hasClass('show')) {
    allPanels.removeClass('show');
    morelink.html("Read More>");
  } else {
    jQuery(this).html("Read Less").parent().next().addClass('show');
    return false;
  }
});

＆＃13;

.hide {
  display: none;
}

.show {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<dl class="plans">
  <dt class="plan-title">1-Bed / 1.5-Bath | 1209sf | $3330+ | <a class="read" href="#">Read More></a></dt>
  <dd>
    <ul>
      <li>massive open plan units</li>
      <li>10’-6” ceilings with recessed lighting</li>
      <li>hardwood floors and plush carpeting</li>
      <li>kitchen with solid surface countertops, wine refrigerator, gas range &amp; electric oven</li>
      <li>zoned central cooling and heating</li>
      <li>master bath featuring soaking tub, dual faucet shower, and private water closet</li>
      <li>high speed data connections</li>
      <li>views of downtown</li>
      <li>large his and her closet space</li>
      <li>floor to ceiling windows</li>
    </ul>
    <ul>
      <li> A-13</li>
      <li> A-23</li>
      <li> B-15</li>
    </ul>
  </dd>
  <dt class="plan-title">2-Bed / 2.5-Bath | 1941sf | $5007+ | <a class="read" href="#">Read More></a></dt>
  <dd>
    <ul>
      <li>massive open plan units</li>
      <li>10’-6” ceilings with recessed lighting</li>
      <li>hardwood floors and plush carpeting</li>
      <li>kitchen with solid surface countertops, wine refrigerator, gas range &amp; electric oven</li>
      <li>zoned central cooling and heating</li>
      <li>master bath featuring soaking tub, dual faucet shower, and private water closet</li>
      <li>high speed data connections</li>
      <li>views of downtown</li>
      <li>large his and her closet space</li>
      <li>floor to ceiling windows</li>
    </ul>
  </dd>
</dl>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个：

＆＃13;

＆＃13;

var allPanels = $('.plans > dd').hide();

$('.plans > dt > a').click(function(e) {
    e.preventDefault(); 
    var $content = $(this).closest("dt").next("dd");
    $content.toggle();
    var html = $content.is(":visible") ? "Read Less":"Read More>";
    $(this).html(html);
    
    $(this).closest("dt").siblings("dt").each(function() { 
      $(this).next().hide();
      $(this).find("a").html("Read More>");
    }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<dl class="plans">
  <dt class="plan-title">1-Bed / 1.5-Bath | 1209sf | $3330+ | <a class="read" href="#">Read More></a></dt>
  <dd>
    <ul>
      <li>massive open plan units</li>
      <li>10’-6” ceilings with recessed lighting</li>
      <li>hardwood floors and plush carpeting</li>
      <li>kitchen with solid surface countertops, wine refrigerator, gas range &amp; electric oven</li>
      <li>zoned central cooling and heating</li>
      <li>master bath featuring soaking tub, dual faucet shower, and private water closet</li>
      <li>high speed data connections</li>
      <li>views of downtown</li>
      <li>large his and her closet space</li>
      <li>floor to ceiling windows</li>
    </ul>
    <ul>
      <li> A-13</li>
      <li> A-23</li>
      <li> B-15</li>
    </ul>
  </dd>
  <dt class="plan-title">2-Bed / 2.5-Bath | 1941sf | $5007+ | <a class="read" href="#">Read More></a></dt>
  <dd>
    <ul>
      <li>massive open plan units</li>
      <li>10’-6” ceilings with recessed lighting</li>
      <li>hardwood floors and plush carpeting</li>
      <li>kitchen with solid surface countertops, wine refrigerator, gas range &amp; electric oven</li>
      <li>zoned central cooling and heating</li>
      <li>master bath featuring soaking tub, dual faucet shower, and private water closet</li>
      <li>high speed data connections</li>
      <li>views of downtown</li>
      <li>large his and her closet space</li>
      <li>floor to ceiling windows</li>
    </ul>
  </dd>
</dl>

＆＃13;

＆＃13;

＆＃13;