带有slideToggle JQuery

Question

我在为切换按钮显示两种不同状态时遇到问题。当我单击按钮时，它会显示隐藏的h1文本。但是，在slideToggle（）方法缩回后，它不会删除h1文本。要100％明确：当我点击切换按钮时，我需要最小化日历容器。我需要隐藏的信息显示在它的位置？反之亦然。

＆＃13;

＆＃13;

    
        $(document).on('turbolinks:load', function () {
            $("button").click(function(){
                $("div#hide-calendar").slideToggle("slow", "linear", function(){
                  $("div#calendar-minimized-panel-msg").show();
                });
            });
        });
    

＆＃13;

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


    <div class="col-md-6">
      <div class="close-calendar-btn">
        <button class="btn btn-outline-primary btn-sm" id="hide-calendar">Minimize Calendar</button>
      </div>
      <div class="calendar-title">
        <h4>Appointment Calendar</h4>
      </div>
      <div class="calendar-container" id="hide-calendar">
        <%= month_calendar appointments: @appointments do |date, appointments| %>
            <%= date %>
            <% appointments.each do |appointment| %>
                <div>
                  <%= appointment.name %>
                </div>
            <% end %>
        <% end %>
      </div>
      <div id="calendar-minimized-panel-msg" style= "display: none;">
        <h3>Maximize Calendar Message</h3>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

检查元素状态是可见还是隐藏，并根据该状态更新消息元素状态。您可以使用toggle()方法切换状态，并使用is()和:hidden获取基于主要元素状态的布尔值。

$("button").click(function() {
  $("div#hide-calendar").slideToggle("slow", "linear", function() {
    $("div#calendar-minimized-panel-msg").toggle($(this).is(':hidden'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="close-calendar-btn">
    <button class="btn btn-outline-primary btn-sm" id="hide-calendar">Minimize Calendar</button>
  </div>
  <div class="calendar-title">
    <h4>Appointment Calendar</h4>
  </div>
  <div class="calendar-container" id="hide-calendar">
    <div>
      fdf
    </div>
  </div>
  <div id="calendar-minimized-panel-msg" style="display: none;">
    <h3>Maximize Calendar Message</h3>
  </div>
</div>

<script type="text/javascript">
  $("button").click(function() {
    $("div#hide-calendar").slideToggle("slow", "linear", function() {
      $("div#calendar-minimized-panel-msg").toggle($(this).is(':hidden'));
    });
  });
</script>