描述: 我目前正在做一個SFRA(sales force B2C Commerce store front Reference Architecture)項目，在試圖隱藏/顯示& quot輸入優惠券& quot當& quot輸入優惠券代碼鏈接被單擊。

背景: 我有一個ISML文件，其中包含渲染& quot輸入優惠券& quot部分。此外，我有一個CSS文件，其中包含基于目標部分隱藏和顯示元素的樣式。我已經成功地使用JavaScript和jQuery實現了預期的行為，但是我現在試圖單獨使用CSS來實現相同的結果。

代碼片段: 以下是ISML文件中的相關代碼:

<div id="show">
    <iscomment> <a href="#show" id="promo-code-link" class="show">${Resource.msg('label.display.code', 'cart', null)}</a> </iscomment>
    <a href="#show" id="promo-code-link" class="show">Click here if you have a coupon code</a>
    <div id="promo-code-wrapper" class="hidden">
        <div class="row">
            <div class="col-12 d-sm-none">
                <p class="optional-promo">
                    <iscomment> ${Resource.msg('action.enter.promo.code', 'cart', null)}
                
                </iscomment>
                Enter promo code</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <form action="${pdict.actionUrls.submitCouponCodeUrl}" class="promo-code-form" method="GET"
                    name="promo-code-form">
                    <div class="form-group">
                        <label for="couponCode">${Resource.msg('label.promo.code', 'cart', null)}</label>
                        <div class="row">
                            <div class="col-7">
                                <input type="text" class="form-control coupon-code-field" id="couponCode"
                                    name="couponCode"
                                    placeholder="${Resource.msg('placholder.text.promo.code.input', 'cart', null)}" />
                                <div class="coupon-error">
                                    <span class="coupon-missing-error" id="missingCouponCode"
                                        role="alert">${Resource.msg('error.missing.coupon.code', 'cart', null)}</span>
                                    <span class="coupon-error-message" id="invalidCouponCode" role="alert"></span>
                                </div>
                            </div>

                            <input type="hidden" name="${pdict.csrf.tokenName}" value="${pdict.csrf.token}" />

                            <div class="col-5 promo-code-submit">
                                <button type="submit" class="btn btn-primary btn-block promo-code-btn">
                                    ${Resource.msg('button.submit.promo.code', 'cart', null)}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

下面是CSS文件中的相關代碼:

.hidden {
    display: none;
}

.show {
    display: block;
}

#promo-code-link {
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

#content {
    display: none;
}
#show:target #promo-code-wrapper {
    display: block;
}
#show:target #promo-code-link {
    display: none;
}

當前方法: 目前，我正在嘗試使用CSS來切換& quot輸入優惠券& quot部分基于目標元素的狀態。

預期結果: 我期待著& quot輸入優惠券& quot默認情況下，部分是隱藏的，當& quot輸入優惠券代碼鏈接，應該會顯示出來。

問題: 遺憾的是，當單擊鏈接時，該部分沒有像預期的那樣隱藏或顯示。我懷疑我的CSS代碼可能有問題。

任何關于單獨使用CSS實現這一行為的幫助或指導都將不勝感激。或者，如果對所提供的CSS代碼有任何問題或改進，請告訴我。先謝謝你了 ！