在 jQuery 幻灯片切换上更改按钮样式

Change button style on jQuery slide toggle

本文关键字：按钮 样式 jQuery 幻灯片      更新时间：2023-09-26

我的项目上有一个回调函数。

我可以更改按钮样式吗？

<script type="text/javascript">
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            });
        });
    });
</script>
</head>
<body>
     <button type="button" class="slide-toggle">Callback</button>
     <div class="box">
         <div class="box-inner">Lorem</div>
     </div>

谢谢！

您可以使用 jQuery 函数 toggleClass 向元素添加/删除类。这样，您的代码是干净的，您可以在代码中的任何位置使用相同的动画，并可以轻松修改它们。

请参阅下面的示例。在当前示例中，我们在单击按钮时将类添加到skin框元素。您可以根据需要修改skin类。我还添加了box-transition类来制作动画效果，您也可以根据需要进行编辑，我建议您检查一下。

$(function(){
  $('.slide-toggle').on('click', function(){
    $(this).toggleClass('active');
    $('.box').toggleClass('skin');
  });
});
.box{
  width: 200px;
  height: 200px;
  background: #f34;
}
.box-transition{
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.skin{
  width: 100px;
  height: 100px;
  background: #ccc;
}
.active{
  background: #ccc;
  color: #fff;
  border: none;
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="slide-toggle">Callback</button>
<div class="box box-transition">
  <div class="box-inner">Lorem</div>
</div>

$(document).ready(function(){
    $(".slide-toggle").click(function(){
        $(".box").animate({
            width: "toggle",
            color: '#f00',
            background: '#00f'
        });
    });
});

或者正如他们在评论中提到的那样 我们 A 类

<style>
    .your_class {
        color: #f00;
        background: #00f;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            }).toggleClass('your_class');
        });
    });
</script>

(下次使用正确的标签(

相关文章：