帶有 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獲取基於主元素狀態的布爾值。

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