slideToggle() 无法正常工作

Question

目前我有一个 onclick 函数，它使用 .slideToggle() 在我的 html 中切换视图。但是每当我按下按钮触发这个事件时，它什么都不做。这是我的代码：

<a href="javascript:void(0)" class="btn btn-default btn-sm" id="searchwrap"><i class="fa fa-search"></i> Search</a>
<div class="col-sm-12 searchwrap" id="searchbox" style="display:none">
        <fieldset>
          <div class="card-box bg-lightdark border-3">
            <div class="container">
              <div class="row form-group">
                <div class="col-sm-3">
                  <label>Type</label>
                  <select id="ftype" class="form-control filter" name="ftype" data-column="5">
                    <option value="">All Types</option>
                  </select>
                </div>
                
                <div class="col-sm-3 m-t-30">
                  <button type="button" id="btnsearch" name="btnsearch" class="btn btn-info btn-sm waves-inverse m-b-5"> Search <i class="fa fa-search"></i> </button>
                  <a class="btn btn-inverse btn-trans btn-sm waves-inverse m-b-5" id="reset">Reset</a></div>
              </div>
            </div>
          </div>
        </fieldset>
      </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function () { 
    $("#searchwrap").click(function(e){ ('.searchwrap').slideToggle(); console.log("press");});
 });

我还在 jquery 中添加了一个console.log("press")，点击时它不显示任何内容。

小提琴：https://codesandbox.io/s/thirsty-night-w8j03?file=/index.html

Answer 1

显示您的代码：

<script type="application/javascript">
$(document).ready(function () { 
    $("#searchwrap").click(function(e){ ('.searchwrap').slideToggle(); console.log("press");});
 });

您没有关闭脚本标签，也没有为您的 searchwrap 类使用 jquery 符号。

试试这个

<script type="application/javascript">
$(document).ready(function () { 
    $("#searchwrap").click(function(e){ $('.searchwrap').slideToggle(); console.log("press");});
 });
</script>