0

我有三个面板，它们不需要单独操作，即如果您单击任何隐藏详细信息 p 标签（按钮），所有面板详细信息都将隐藏。对于按钮文本更改，我需要相同的行为，但目前它仅在个人基础上发生，而不是作为一个组发生。

HTML

    <div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
<div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>
<div class="col-sm compare-card">
    <div class="compare-card-header">
        <h4 style="display:inline-block">Title</h4>
        <a href="#" class="tooltip-trigger" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="tooltip text" style="" class="black-tooltip"><img src="images/tooltip.svg"></a>
    </div>
    <div class="compare-card-balance">
        <p class="benefit-title">title</p>
        <p class="f-14">subtitle</p>
    </div>
    <div class="compare-card-attributes">
        text here
    </div>
    <div class="compare-card-footer">
        <p class="hide-show-attributes"><span id="toggleShow">Hide Details</span></p>
    </div>
</div>

Javascript

    //COMPARISON CARD SCRIPT---------------
//This wll show and hide the card attributes section inside the card
jQuery('.hide-show-attributes').on('click', function() {
    jQuery('.compare-card-attributes').toggleClass('clicked-hide');
 });

//This will toggle the text on the show hide p tag button messaging
 jQuery(document).ready(function($) {
    $('.compare-card-footer').find(".hide-show-attributes").click(function(){;
        if($(this).find("span#toggleShow").text()=="Hide Details"){
            $(this).find("span#toggleShow").text("Show Details");
        }
        else{
            $(this).find("span#toggleShow").text("Hide Details");
        }
    });
});
//END COMPARISON CARD SCRIPT---------------

CSS

.clicked-hide {
display: none;

}

4

1 回答 1

0

你toggleShow是一个身份证。HTML 中不能有两个具有相同 id 的元素。把它们变成类，它应该可以工作。

<span class="toggleShow">Hide Details</span>

和

if($(this).find("span.toggleShow").first().text()=="Hide Details"){
    $("span.toggleShow").text("Show Details");
}
else {
    $("span.toggleShow").text("Hide Details");
}

您不能使用$(this)它指向.hide-show-attributes元素。

于 2020-10-07T00:19:03.587 回答