javascript - 当我让它出现或消失时，CSS 开关切换动画不起作用

Question

我有一个问题。我使用纯 css switch 切换按钮。这是它的代码:

    .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius:50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.checkbox:checked + .switch::after {
  left : 20px;
}
.checkbox:checked + .switch {
  background-color: #7983ff;
}
.checkbox {
  display : none;
}

对于 HTML 部分

<input type="checkbox" id="toggle" class="checkbox"/><label for="toggle" class="switch"></label>

对于我想隐藏取消隐藏的div

<div id="slideMe">
<p style="text-align: center;"><strong>Accès directs</strong></p>

<ul>
    <li style="text-align: left;"><a href="#mavilledansmapoche2">Ma Ville dans ma poche</a></li>
    <li style="text-align: left;"><a href="#lecontexteenchiffre">Le contexte en chiffres</a></li>
    <li style="text-align: left;"><a href="#moncentreshoppingpourquipourquoi">MCS, pour qui et pourquoi ?</a></li>
    <li style="text-align: left;"><a href="#questcequemoncentreshopping">Qu'est-ce que MonCentreShopping ?</a></li>
    <li style="text-align: left;"><a href="#commentfonctionnemoncentreshopping">Comment fonctionne MCS ?</a></li>
    <li style="text-align: left;"><a href="#combiencoutemoncentreshopping">Combien coûte MCS ?</a></li>
    <li style="text-align: left;"><a href="#lesoffresmoncentreshoppingendetail">Les offres MCS en détail</a></li>
    <li style="text-align: left;"><a href="#nouscontacter">Nous contacter</a></li>
</ul>
</div>

当它不做任何 Action 时，它工作得很好。但我想用它使它出现在 id #slideMe 的 div 中。 所以我使用了一个 jQuery 函数:

jQuery(document).ready(function() {
    jQuery('#slideMe').show();
    jQuery('#toggle').click(function() {
        jQuery('#slideMe').slideToggle('slow');
        return false;
    });
});

当我点击开关时，内容可以很好地隐藏和取消隐藏，但我的切换开关的动画不再起作用。当然，如果删除我的 jQuery，切换动画效果很好。

知道会发生什么吗？

非常感谢大家

Answer 1

删除函数中的 return false;，它不是必需的。当你想停止函数的执行或当你需要取消一个事件时使用这个语句，例如当提交表单并且验证失败时。

您可以阅读更多相关信息 on this question .