Question

我有三个服务，带有一个“更多阅读”按钮，我希望它们全部显示一些文本，当用户单击“更多阅读”按钮时，它显示更多文本，但努力使文本变得混乱。我正在使用一个称为processwire的CMS。我有一些jQuery，但想知道我要去错吗？

$("#designLink").addClass("active");

$("#designLink").click(function (e) {
    e.preventDefault();
    $("#DesignService").show();
    $("#PrintService").hide();
    $("#PublishingService").hide();
    $("#DesignService").removeClass("visuallyhidden");
    $("#designLink").addClass("active");
    $("#printLink").removeClass("active");
    $("#publishingLink").removeClass("active");
});

$("#printLink").click(function (e) {
    e.preventDefault();
    $("#DesignService").hide();
    $("#PrintService").show();
    $("#PublishingService").hide();
    $("#PrintService").removeClass("visuallyhidden");
    $("#designLink").removeClass("active");
    $("#printLink").addClass("active");
    $("#publishingLink").removeClass("active");
});

$("#publishingLink").click(function (e) {
    e.preventDefault();
    $("#DesignService").hide();
    $("#PrintService").hide();
    $("#PublishingService").show();
    $("#PublishingService").removeClass("visuallyhidden");
    $("#designLink").removeClass("active");
    $("#printLink").removeClass("active");
    $("#publishingLink").addClass("active");
});

    <div class="container--content">

      <div class="home-services cf">
        <h2 class="text-center">Our Services</h2>
        <div class="home-services__services-container">
          <div class="home-services__services grid flex">
            <div class="service-box lap-and-up-one-third grid__item">
<!-- design section -->
              <p class="service-box__link">Design</p>
              <img class="service-box__icon" src="<?php echo $config->urls->templates ?>public/images/icon-design.svg" onerror="this.onerror=null; this.src='icon-design.png'" alt="" title=" Design Work">
 <!--
   design text
          -->
              <?php echo "{$page->designServiceText}"; ?>

              <div class="toggle-box">
                <input type="checkbox" style="display: none" id="toggle-box__toggle">
                <label class="button" for="toggle-box__toggle">Toggle read more</label>
                <div><?php echo "{$page->designServiceTextMore}"; ?></div>
              </div>
            </div>
            <!--
printing section
            -->
            <div class="service-box lap-and-up-one-third grid__item">
              <p class="service-box__link">Print</p>
              <img class="service-box__icon" src="<?php echo $config->urls->templates ?>public/images/icon-print.svg" onerror="this.onerror=null; this.src='icon-print.png'" alt="" title="">
 <!--
print text
          -->
              <?php echo "{$page->printServiceText}"; ?>
              <div class="toggle-box">
                <input type="checkbox" style="display: none" id="toggle-box__toggle2">
                <label class="button" for="toggle-box__toggle2">Toggle read more</label>
                <div><?php echo "{$page->printServiceTextMore}"; ?></div>
              </div>
            </div>
            <!--
publishing section
          -->
            <div class="service-box lap-and-up-one-third grid__item">
              <p class="service-box__link">Publishing</p>
              <img class="service-box__icon" src="<?php echo $config->urls->templates ?>public/images/icon-publishing.svg" onerror="this.onerror=null; this.src='icon-publishing.png'" alt="" title=" Publishing Work">
 <!--
publishing text
          -->
              <?php echo "{$page->publishingServiceText}"; ?>
              <div class="toggle-box">
                <input type="checkbox" style="display: none" id="toggle-box__toggle3">
                <label class="button" for="toggle-box__toggle3">Toggle read more</label>
                <div><?php echo "{$page->publishingServiceTextMore}"; ?></div>
              </div>
            </div>
            <hr class="home-services__divider" />
          </div>
        </div>
      </div>

    </div>

Answer 1

您所指的是代码中不存在的类。 publishingLink仅在Javascript中提及，而在HTML或CSS中未提及。

阅读更多切换按钮

1 个答案: