为什么我的按钮在添加类后不会改变状态？答案

【问题标题】：Why won't my button change state after adding a class?为什么我的按钮在添加类后不会改变状态？
【发布时间】：2023-03-06 16:01:01
【问题描述】：

我有一个按钮，我使用<input> 标签和一些 jQuery/CSS 来设置它的样式并使其具有功能。

我的问题是我的按钮在单击时无法旋转，尽管我在那里添加了flip 函数。可能是什么问题？我做错了吗，还是遗漏了什么？我可以尝试一个更简单的选择吗？我只是希望它在从输入值中显示的当前状态单击它时向下翻转。

$(document).ready(function() {
  $('.myInnerBtn').click(function() {
    $(".blogs").slideToggle("slow", function() {
      $(".myInnerBtn").toggleClass('flip');
    });
  });
});

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

<div class="innerbuttonwrapper1">
    <input type="button" value="►" class="myInnerBtn" style="background:none; font-family:Overpass, Arial, Verdana; font-size:18px; border:none; cursor:pointer; color:#741dff;" />
    <a class="blogs" href="iwriteonwheels.com/post/190161104157/tbt-ace-of-base" style="display:none;">&nbsp;&nbsp;&nbsp;TBT: Ace of Base</a>
    <br>
    <p>
        <a class="blogs" href="iwriteonwheels.com/post/190002799642/2020" style="display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020</a>
        <br><br><br>
</div>

【问题讨论】：

是flip 类执行旋转吗？如果是这样，我们需要查看问题中包含的 CSS 代码（以及所有相关的 HTML，以便我们可以创建可执行示例）
@RoryMcCrossan 是的。好的，我将尝试在此处为您复制/粘贴它： .flip { transform: rotate(90deg);这就是翻转类的 CSS。这是相关的 HTML 等... iwriteonwheels.com/post/190161104157/tbt-ace-of-base" style="display:none;"> TBT: Ace of Base
iwriteonwheels.com/post/190002799642/2020" style="display:none;"> 2020

希望这会有所帮助。如果需要更多，请告诉我。谢谢。
请使用问题下方的edit 链接添加更多信息，因为 cmets 中的代码几乎不可读。
如果.blog-元素不存在，slideToggle 函数将不会运行，这意味着不会执行切换类的回调。你有 .blog 元素吗？
@RoryMcCrossan 好的，让我重做。它看起来像一堆 blob 哈哈......翻转类的 CSS：.flip { transform: rotate(90deg); }

标签： jquery button input flip

【解决方案1】：

为简单起见，只需添加大小写而不是切换，因为您不知道有多少元素可以切换您的类。

$(document).ready(function() {
  $('.myInnerBtn').click(function() {
    $(".blogs").slideToggle("slow", function() {
        if ($(".blogs").is(':visible'))
            $(".myInnerBtn").addClass('flip');
        else
            $(".myInnerBtn").removeClass('flip');
    });
  });
});

.flip { transform: rotate(90deg);}

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

<div class="innerbuttonwrapper1">
    <input type="button" value="►" class="myInnerBtn" style="background:none; font-family:Overpass, Arial, Verdana; font-size:18px; border:none; cursor:pointer; color:#741dff;" />
    <a class="blogs" href="iwriteonwheels.com/post/190161104157/tbt-ace-of-base" style="display:none;">&nbsp;&nbsp;&nbsp;TBT: Ace of Base</a>
    <br>
    <p>
        <a class="blogs" href="iwriteonwheels.com/post/190002799642/2020" style="display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020</a>
        <br><br><br>
</div>

编辑：为了清楚起见，这个分析器仍然留下了 slideToggle 的弱点，它只会切换，如果碰巧你的一个 .blogs 正在显示而另一个没有，那将导致问题。

【讨论】：

~ 这已经解决了这个问题。再次感谢。在创建更多这样的按钮时，我肯定会考虑到这一点。
嗨，只是一个简单的问题。单击打开后，我需要在代码中添加什么来推送我的存档？现在它与下一个存档（2019 年）重叠
@Ladan 这听起来像是 CSS 问题。您可能在某处使用position: absolute，它会折叠父元素的高度。如果您的档案使用静态位置，他们可以将其下方的内容推开。
好的，所以改成静态定位就可以了？我都有绝对定位。我做了一些阅读，绝对定位不会在单击时将内容向下移动。
我还是不知道该怎么做。