Question

我有三个面板，它们需要不分别操作，即，如果单击任何隐藏详细信息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;

}

Answer 1

您的toggleShow是一个ID。 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元素。

单击任何按钮时切换所有按钮文本

1 个答案: