javascript - 带有 slideToggle JQuery 的两种状态切换按钮

Question

我在为切换按钮显示两种不同状态时遇到了问题。当我单击该按钮时，它会显示隐藏的 h1 文本。但是，它不会在 slideToggle() 方法收回后删除 h1 文本。要 100% 清楚:我需要在单击切换按钮时将日历容器最小化。我需要隐藏的消息显示在它的位置吗？反之亦然。

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

<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>

Answer 1

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

$("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>