javascript - 单击图标显示 div，然后再次单击隐藏 Div

Question

我有一个带搜索图标的导航栏。当我单击它时，我希望它在我有一个输入和一个按钮的地方显示一个 div，如果我再次单击同一个图标，我想隐藏同一个 div。到目前为止，当我点击它时，它会显示 div，但是当我再次点击它时，它不会关闭它。

<form class="form-inline my-2 my-lg-0">
    <i id="searchIcon" class="fas fa-search fa-2x">&nbsp;&nbsp;</i>
    <div  style="display:none" class="input-group date" id="searchDate" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6"/>&nbsp;&nbsp;
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
    </div>
    <a style="color: black" href="logout.php"><i class="fas fa-sign-out-alt fa-2x"></i></a>
</form>

还有我的javascript:

    $('#searchIcon').click(function(){
        console.log("searcg clicked");
        this.click?$('#searchDate').show(1000):$('#searchDate').hide(1000);
    }); 

有谁知道为什么它不关闭？

Answer 1

jQuery自带toggle方法:

$('#searchIcon').click(function() {
  $("#searchDate").toggle("slow");
});

@import url("https://use.fontawesome.com/releases/v5.3.1/css/all.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form class="form-inline my-2 my-lg-0">
  <i id="searchIcon" class="fas fa-search fa-2x">&nbsp;&nbsp;</i>
  <div style="display:none" class="input-group date" id="searchDate" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6" />&nbsp;&nbsp;
    <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
  </div>
  <a style="color: black" href="logout.php"><i class="fas fa-sign-out-alt fa-2x"></i></a>
</form>