如何在第二次单击时从元素中删除类

Question

我试图在点击一个按钮时切换内容信息块，当我点击另一个按钮时，这是有效的，但当我点击同一个按钮时，我希望隐藏信息，但它目前没有任何作用。

这两个部分由目标属性连接，以便在单击目标按钮时显示正确的内容块。

下面是我的代码：

HTML：

<div class="cce-equipment-row">
    <div class="cce-equipment-column">
        <div class="cce-equipment-image-container">
            <img src="{{root}}static/images/machines/newco-20-1-digital-drip-brewer.png" alt="Newco 20:1 Digital Drip Brewer">
        </div>
        <p>NEWCO 20:1 DIGITAL DRIP<br/>BREWER</p>
        <span class="product-toggle-button" target="25">+</span>
    </div>
    <div class="cce-equipment-column">
        <div class="cce-equipment-image-container">
            <img src="{{root}}static/images/machines/nuova-simonelli-appia-espresso-machine.png" alt="Nuova Simonelli Appia Espresso Machine">
        </div>
        <p>NUOVA SIMONELLI APPIA<br/>ESPRESSO MACHINE</p>
        <span class="product-toggle-button" target="26">+</span>
    </div>
    <div class="cce-equipment-column">
        <div class="cce-equipment-image-container">
            <img src="{{root}}static/images/machines/nuovo-simonelli-mdx-grinder.png" alt="Nuova Simonelli MDX Grinder">
        </div>
        <p>NUOVA SIMONELLI MDX<br/>GRINDER</p>
        <span class="product-toggle-button" target="27">+</span>
    </div>
    <div class="cce-equipment-column">
        <div class="cce-equipment-image-container">
            <img src="{{root}}static/images/machines/starbucks-digital-interactive-bean-to-cup-brewer.png" alt="Newco Eco Series Drip Brewerq">
        </div>
        <p>STARBUCKS DIGITAL INTERACTIVE<br/>BEAN TO CUP BREWER</p>
        <span class="product-toggle-button" target="28">+</span>
    </div>
</div>
<div id="cce-equipment-info25" class="cce-equipment-info ams-multi-tasker-combo">
    <h1>NEWCO 20:1 DIGITAL DRIP BREWER</h1>
    <h2>Perfectly designed, right down to the latte macchiato</h2>
    <p>The IMPRESSA XJ9 Professional cuts an outstanding figure where the quality of the drinks served is just as important as aesthetics in architecture, ambience and design.</p>
    <p>It creates perfect latte macchiato, cappuccino, café crème, espresso and ristretto at the touch of a button.</p>
    <p>Meanwhile, the clear and symmetrical design, sophisticated chrome-plated bean container and brilliant silver finish add a touch of charisma.</p>
    <a href="#"><span>Download PDF Specs</span></a>
</div>
<div id="cce-equipment-info26" class="cce-equipment-info ams-wide-gem-snack">
    <h1>NUOVA SIMONELLI APPIA ESPRESSO MACHINE</h1>
    <h2>Perfectly designed, right down to the latte macchiato</h2>
    <p>The IMPRESSA XJ9 Professional cuts an outstanding figure where the quality of the drinks served is just as important as aesthetics in architecture, ambience and design.</p>
    <p>It creates perfect latte macchiato, cappuccino, café crème, espresso and ristretto at the touch of a button.</p>
    <p>Meanwhile, the clear and symmetrical design, sophisticated chrome-plated bean container and brilliant silver finish add a touch of charisma.</p>
    <a href="#"><span>Download PDF Specs</span></a>
</div>
<div id="cce-equipment-info27" class="cce-equipment-info crane-bev-max-media">
    <h1>NUOVA SIMONELLI MDX GRINDER</h1>
    <h2>Perfectly designed, right down to the latte macchiato</h2>
    <p>The IMPRESSA XJ9 Professional cuts an outstanding figure where the quality of the drinks served is just as important as aesthetics in architecture, ambience and design.</p>
    <p>It creates perfect latte macchiato, cappuccino, café crème, espresso and ristretto at the touch of a button.</p>
    <p>Meanwhile, the clear and symmetrical design, sophisticated chrome-plated bean container and brilliant silver finish add a touch of charisma.</p>
    <a href="#"><span>Download PDF Specs</span></a>
</div>
<div id="cce-equipment-info28" class="cce-equipment-info crane-merchant-media-snack">
    <h1>STARBUCKS DIGITAL INTERACTIVE BEAN TO CUP BREWER</h1>
    <h2>Perfectly designed, right down to the latte macchiato</h2>
    <p>The IMPRESSA XJ9 Professional cuts an outstanding figure where the quality of the drinks served is just as important as aesthetics in architecture, ambience and design.</p>
    <p>It creates perfect latte macchiato, cappuccino, café crème, espresso and ristretto at the touch of a button.</p>
    <p>Meanwhile, the clear and symmetrical design, sophisticated chrome-plated bean container and brilliant silver finish add a touch of charisma.</p>
    <a href="#"><span>Download PDF Specs</span></a>
</div>

JS：

$('.product-toggle-button').click(function(e) {
    $('.product-toggle-button--open').removeClass('product-toggle-button--open');
    $(this).toggleClass('product-toggle-button--open');
    $('.cce-equipment-info').hide();
    $('#cce-equipment-info'+$(this).attr('target')).show();
});

Answer 1

这是因为如果--open类存在，您的removeClass也会从current按钮中删除。

那么toggleClass将始终只充当addClass

尝试更改为：

 $('.product-toggle-button--open').not(this).removeClass('product-toggle-button--open');
                                  // ^^ exclude current button