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

标签 javascript jquery html css ruby-on-rails

我在为切换按钮显示两种不同状态时遇到了问题。当我单击该按钮时,它会显示隐藏的 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>

最佳答案

检查元素状态是可见还是隐藏,并根据此更新消息元素状态。您可以使用 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>

关于javascript - 带有 slideToggle JQuery 的两种状态切换按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41771158/

相关文章:

javascript - Laravel 5 AJAX 重定向问题获取 'Class App\Http\Controllers\does not exist'

jquery - URL - 查看 URL 中的字符串

javascript - 如何通过对元素的子属性设置过滤器来获取元素

javascript - 通过 javascript 切换 div 大小

html - 删除 css 绝对位置,同时保持元素内联

javascript - HTML5 视频 OnComplete 下一张幻灯片 Reveal.js

jquery - 我如何格式化(主要是更改大小)表单中的下拉菜单(选择)?

javascript - 想要使用 Angular 将表单中的数据作为 JSON 数组中的新对象提交

javascript - Ajax 无法捕获从 ResponseEntity (Spring MVC) 对象发送的错误

javascript - 将日期从 Python 转换为 Javascript