JQuery：将slideToggle（）作为隐藏启动

Question

我创造了这个：

    $(document).ready(function(){
        var speed = 500;

        $('.brewed').click(function(){
            $('.ifBrewed').slideToggle(speed);
        });
    });

html, body {
        background-color: black;
        color: white;
    }

    input[type=checkbox] {
    display:none;
    }

    .step_1, .step_2, .step_3 {
        padding: 2%;
        margin: 0 auto;
        font-weight: 100;
    }

    input[type=checkbox]:checked + label {
        border: 3px solid white;
    }

    .ifBrewed {
        background-color: #181818;
        padding: 2%;
        display: none;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <!-- Step 1 -->
    <div class="row">
        <h2>How do you enjoy your coffee?</h2>
        <div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
            <div>
                <input type="checkbox" name="site" id="so" />
                <label for="so">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Espresso</h3>
                    <p>add the description here about this coffee!</p>
                </label>
            </div>
        </div>
        <div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
            <div>
                 <input type="checkbox" name="site" id="sf" />
                <label for="sf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Brewed</h3>
                    <p>add the description here about this coffee!</p>
                </label>
            </div>
        </div>
    </div>

<!-- Step 1.5 -->
<div class="ifBrewed">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="ba" />
                <label for="ba">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Drip coffee</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bb" />
                <label for="bb">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Aeropress</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bc" />
                <label for="bc">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>French press</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bd" />
                <label for="bd">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Vacuum pot</h3>
                </label>
            </div>
        </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="be" />
                <label for="be">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Syphon</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bf" />
                <label for="bf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>V60</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bg" />
                <label for="bg">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Chemex</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bh" />
                <label for="bh">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Moka pot</h3>
                </label>
            </div>
        </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
        <div class="col-lg-3 col-md-3"></div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bi" />
                <label for="bi">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Percolato</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
            <div>
                <input type="checkbox" name="site" id="bj" />
                <label for="bj">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Eva solo</h3>
                </label>
            </div>
        </div>
        <div class="col-lg-3 col-md-3"></div>
    </div>
</div>
</div>

我确实喜欢其他线程说，添加display：none功能，我确实尝试了CSS和JQuery .css（）。 它进展顺利，但我需要帮助解决这个小错误。

正如您所看到的，当您单击“滑动”切换输入时，它会切换回来然后切换回来，但我希望它保持不切换直到我再次单击它。

我该怎么做？

谢谢！

Answer 1

点击事件触发两次，因为您已在click上分配了一个.brewed事件处理程序，并且它位于输入/标签中。您需要重新考虑要切换.ifBrewed的事件，或者只需为该标签指定另一个点击处理程序并禁用默认操作。

$(document).ready(function() {
  var speed = 500;
  $('label[for="sf"]').on('click',function(e) {
    e.preventDefault();
  })
  $('.brewed').on('click',function(e) {
    $(".ifBrewed").slideToggle(speed);
  })
});

html,
body {
  background-color: black;
  color: white;
}

input[type=checkbox] {
  display: none;
}

.step_1,
.step_2,
.step_3 {
  padding: 2%;
  margin: 0 auto;
  font-weight: 100;
}

input[type=checkbox]:checked+label {
  border: 3px solid white;
}

.ifBrewed {
  background-color: #181818;
  padding: 2%;
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- Step 1 -->
  <div class="row">
    <h2>How do you enjoy your coffee?</h2>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
      <div>
        <input type="checkbox" name="site" id="so" />
        <label for="so">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Espresso</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
      <div>
        <input type="checkbox" name="site" id="sf" />
        <label for="sf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Brewed</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
  </div>

  <!-- Step 1.5 -->
  <div class="ifBrewed">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="ba" />
          <label for="ba">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Drip coffee</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bb" />
          <label for="bb">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Aeropress</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bc" />
          <label for="bc">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>French press</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bd" />
          <label for="bd">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Vacuum pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="be" />
          <label for="be">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Syphon</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bf" />
          <label for="bf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>V60</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bg" />
          <label for="bg">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Chemex</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bh" />
          <label for="bh">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Moka pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
      <div class="col-lg-3 col-md-3"></div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bi" />
          <label for="bi">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Percolato</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bj" />
          <label for="bj">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Eva solo</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3"></div>
    </div>
  </div>
</div>

Answer 2

我认为这与标签有关。当您单击.brewed div时，标签点击事件也会被触发。我认为这让jquery认为发生了2次点击事件。

我刚刚添加了e.preventDefault()，可以防止发生任何默认元素点击行为。我注意到即使没有我添加的代码，也没有点击复选框。这是因为它们没有显示任何设置。如果复选框上没有显示，则表示如果它们是表单提交的一部分，则不会发布它们。我不确定这对你来说是否有问题。

$(document).ready(function(){
    var speed = 500;

    $('.brewed').click(function(e){
      e.preventDefault();
      $('.ifBrewed').slideToggle(speed);
    });
});

html,
body {
  background-color: black;
  color: white;
}

input[type=checkbox] {
  display: none;
}

.step_1,
.step_2,
.step_3 {
  padding: 2%;
  margin: 0 auto;
  font-weight: 100;
}

input[type=checkbox]:checked+label {
  border: 3px solid white;
}

.ifBrewed {
  background-color: #181818;
  padding: 2%;
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <!-- Step 1 -->
  <div class="row">
    <h2>How do you enjoy your coffee?</h2>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 text-center">
      <div>
        <input type="checkbox" name="site" id="so" />
        <label for="so">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Espresso</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
    <div class="col-lg-6 col-sm-6 col-xs-6 step_1 brewed text-center">
      <div>
        <input type="checkbox" name="site" id="sf" />
        <label for="sf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Brewed</h3>
                    <p>add the description here about this coffee!</p>
                </label>
      </div>
    </div>
  </div>

  <!-- Step 1.5 -->
  <div class="ifBrewed">
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="ba" />
          <label for="ba">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Drip coffee</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bb" />
          <label for="bb">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Aeropress</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bc" />
          <label for="bc">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>French press</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bd" />
          <label for="bd">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Vacuum pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 2 -->
    <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="be" />
          <label for="be">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Syphon</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bf" />
          <label for="bf">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>V60</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bg" />
          <label for="bg">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Chemex</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bh" />
          <label for="bh">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Moka pot</h3>
                </label>
        </div>
      </div>
    </div>
    <!-- Row 3 -->
    <div class="row">
      <div class="col-lg-3 col-md-3"></div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bi" />
          <label for="bi">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Percolato</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 step_1.5 text-center">
        <div>
          <input type="checkbox" name="site" id="bj" />
          <label for="bj">
                    <img class="img-responsive" src="https://villagecraftandcandle.com/image/cache/data/products/fresh-brewed-coffee-800x518.jpg" />
                    <h3>Eva solo</h3>
                </label>
        </div>
      </div>
      <div class="col-lg-3 col-md-3"></div>
    </div>
  </div>
</div>