html中jquery faq页面中的问题

Question

这是我的小提琴

当我点击第一个问题，它显示答案，同时，当我再次点击同一个第一个问题时，它没有隐藏答案。但所有其他功能都很正常。我怎么才能解决这个问题？

html：

<ul id="container">
    <li>
      <h3>How long does Liquid Rubber Waterproof Sealant take to cure?</h3>

      <div class="panel">
        <p>Liquid Rubber Waterproof Sealant is waterbased and curing is dependant on temperature, air movement and humidity.  In normal temperatures of 20 °C (68°F), 1 mm (40 mil, 0.0394") will take approximately 6 - 8 hours.  Please keep in mind the thicker the product is applied in 1 coat, the curing time goes up exponentially.  It is best to do lighter coats and build up your thickness.</p>
      </div>
    </li>
    <li>
      <h3>How thick should my final membrane be of Liquid Rubber Waterproof Sealant?</h3>

      <div class="panel">
        <p>Liquid Rubber Waterproof Sealant final dry film thickness (DFT) will vary depending on the application.  Generally for horizonatal/flat waterproofing you will want a minimum of 2mm (80 mil, 0.0787") DFT.  Coverage is approximately 3.34L / 1 sq. m. or 12 sq. ft. / 1G.  For vertical applications you will want a minimum of 1.5mm (60 mil, 0.0591") DFT.  Coverage is approximately 2.5L / 1 sq. m. or 16 sq. ft. / 1G.  For constant ponding/submersion you will want upwards of 3mm (120 mil, 0.118").  Coverage is approximately 5L / 1 sq. M. or 8 sq. ft. / 1G.</p>
      </div>
    </li>
    <li>
      <h3>How should I prepare the surface?</h3>

      <div class="panel">
        <p>Apply to a dry surface which is free of dirt, debris, oil, grease, coal tar, efflorescence, flaking paint, silicone, solvenated materials or other contaminants.</p>
      </div>
    </li>
        <li>
      <h3>How do I cover gaps and cracks?</h3>

      <div class="panel">
        <p>Liquid Rubber Seam Tape (add link http://liquidrubber.ca/collections/products-page/products/seam-tape) is used to bridge gaps, cracks, seams, vents, protrusions…..</p>
      </div>
    </li>
  </ul>

Answer 1

使用.stop()

$(document).ready(function() {
  $("#container li").click(function() {
    $('#container li div').slideUp();
    $('#container li span').text('+');
    $(this).find('.panel').stop().slideToggle(); // add .stop() here 
    $(this).find('span').text('-');
  });
});

演示http://jsfiddle.net/ftcps9yr/4/

Answer 2

我做了这个：

$(document).ready(function() {
  $("#container li").click(function() {
    // $('#container li div').slideUp();
    // $('#container li span').text('+');
    $(this).find('.panel').slideToggle();
    $(this).find('span').text('-');
  });
});

也就是说，我把前两行评论掉了。

您是否尝试关闭先前的单击打开的div？你得用别的方法。

Answer 3

您的问题是事件传播：

$(document).ready(function() {
  $("#container li").click(function(e) {
    e.stopPropagation();
    $(this).find('.panel').slideToggle();
  });
});

jsfiddle http://jsfiddle.net/ftcps9yr/6/