Question

这是我正在处理的页面：https://www.maisondefemmes.com/product/choose-your-own-adventure-earrings/

我希望按钮一直保持活动状态直到被单击为止，以便用户可以清楚地看到他们所选择的内容。

我已阅读并遵循以下说明，但无济于事：Keep button in active state until clicked upon again

注意：“按钮”曾经是我已关闭的拨动开关。不知道这是否会引起问题。

我已将此JQuery添加到主题中

$('.bundled_product_optional_checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

以及此CSS：

.bundled_product_optional_checkbox.active {
	background-color: #cfb87c !important;
	border: 1px solid #cfb87c !important;
}

<label class="bundled_product_optional_checkbox">
  <input class="bundled_product_checkbox" type="checkbox" name="component_1592104877_bundle_selected_optional_4" value>
  " Add for "
  <span class="price">
    <span class="woocommerce-Price-amount amount">
      <span class="woocommerce-Price-currencySymbol">$</span>
    </span>
  </span>
    ::after
</label>

感谢所有答案。请客气。

Answer 1

答案已更新。

如果您不使用引导程序，则可以忽略那些类和CDN链接：）

$('.bundled_product_optional_checkbox').click(function(){
        if($(this).hasClass('active')){
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    });

.bundled_product_optional_checkbox.active {
	background-color: #cfb87c !important;
	border: 1px solid #cfb87c !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<button class="btn btn-lg btn-default border bundled_product_optional_checkbox">Click me</button>

Answer 2

只需创建自己的名为active的类

<button class="Toggle Button">Toggle Button</button>

然后创建自己的活动类并在CSS中对其进行样式设置

.active{
            border: none;
            background: teal;
            color: white;
        }

现在在jQuery中，点击时切换活动类

$('.toggle-button').click( function() {
    $('.toggle-button').toggleClass('active');
});

现在您应该有一个有效的拨动开关

这是我的代码笔的链接： https://codepen.io/prabodhpanda/pen/pogNqpQ

保持按钮处于活动状态，直到被单击为止

2 个答案: