0

我有三项服务，带有一个阅读更多按钮，我希望它们都显示一些文本，当用户单击阅读更多按钮时，它会显示更多内容，但很难让文本变成togle。我正在使用一个名为 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>

4

1 回答 1

0

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

于 2020-04-06T18:02:59.120 回答