переключить флажок и ::after

avatar
Apeksha Mehta
9 августа 2021 в 00:10
152
1
-1

Как найти значение кнопки-переключателя "скрыть" или "показать"?

Перейдите по URL-адресу: https://en.wikipedia.org/wiki/Castle текст рядом с «Содержимое» скрывает или показывает переключатель Как найти текст «Показать» или «Скрыть» Проверить элемент на наличие код переключения указан ниже Шаги:

  1. Перейдите по URL-адресу: https://en.wikipedia.org/wiki/Castle
  2. текст рядом с таблицей содержимого находится в положении скрытия или отображения переключателя
  3. Как найти текст "Показать" или "Скрыть"
  4. Проверить элемент для кода переключения, упомянутого выше
<div id="toc" class="toc" role="navigation" aria-labelledby="mw-toc-heading">
<input type="checkbox" role="button" id="toctogglecheckbox" class="toctogglecheckbox" style="display:none">
<div class="toctitle" lang="en" dir="ltr">
   <h2 id="mw-toc-heading">Contents</h2>
   <span class="toctogglespan">
   ::before
   <label class="toctogglelabel" for="toctogglecheckbox">
   ::after
   </label>
   </span>
</div>
Источник
Phil
9 августа 2021 в 00:16
0

Что вы подразумеваете под "найти текст"? Текст задается через CSS-контент

Apeksha Mehta
9 августа 2021 в 01:17
0

Спасибо за ответ. В моем сценарии нужно проверить, когда он показывает Hide , содержимое скрыто. Где в html я найду текст «скрыть»? Кроме того, я новичок в ::after и ::before. Не могли бы вы помочь мне понять, что делают ::after и ::before?

Don't Panic
9 августа 2021 в 07:20
0

Отвечает ли это на ваш вопрос? Выбор псевдоэлементов CSS, таких как ::before и ::after, и управление ими с помощью javascript (или jQuery)

Ответы (1)

avatar
sikurro
9 августа 2021 в 04:17
0

Возможно, вам нужно что-то вроде этого

$(document).ready(function(){
    $('#togglecontent').on('click', function(){
        $("#contents").toggle('hide');
        $(this).text(function(i, text){
          return text === "hide" ? "show" : "hide";
      })      
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <label>Contents</label>
   [<a href="#" id="togglecontent">hide</a>]
</div>
<div id="contents">
<ul>
<li class="toclevel-1 tocsection-1"><a href="#Definition"><span class="tocnumber">1</span> <span class="toctext">Definition</span></a>
<ul>
<li class="toclevel-2 tocsection-2"><a href="#Etymology"><span class="tocnumber">1.1</span> <span class="toctext">Etymology</span></a></li>
<li class="toclevel-2 tocsection-3"><a href="#Defining_characteristics"><span class="tocnumber">1.2</span> <span class="toctext">Defining characteristics</span></a></li>
<li class="toclevel-2 tocsection-4"><a href="#Terminology"><span class="tocnumber">1.3</span> <span class="toctext">Terminology</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-5"><a href="#Common_features"><span class="tocnumber">2</span> <span class="toctext">Common features</span></a>
<ul>
<li class="toclevel-2 tocsection-6"><a href="#Motte"><span class="tocnumber">2.1</span> <span class="toctext">Motte</span></a></li>
<li class="toclevel-2 tocsection-7"><a href="#Bailey_and_enceinte"><span class="tocnumber">2.2</span> <span class="toctext">Bailey and enceinte</span></a></li>
<li class="toclevel-2 tocsection-8"><a href="#Keep"><span class="tocnumber">2.3</span> <span class="toctext">Keep</span></a></li>
<li class="toclevel-2 tocsection-9"><a href="#Curtain_wall"><span class="tocnumber">2.4</span> <span class="toctext">Curtain wall</span></a></li>
<li class="toclevel-2 tocsection-10"><a href="#Gatehouse"><span class="tocnumber">2.5</span> <span class="toctext">Gatehouse</span></a></li>
<li class="toclevel-2 tocsection-11"><a href="#Moat"><span class="tocnumber">2.6</span> <span class="toctext">Moat</span></a></li>
<li class="toclevel-2 tocsection-12"><a href="#Battlements"><span class="tocnumber">2.7</span> <span class="toctext">Battlements</span></a></li>
<li class="toclevel-2 tocsection-13"><a href="#Arrowslits"><span class="tocnumber">2.8</span> <span class="toctext">Arrowslits</span></a></li>
<li class="toclevel-2 tocsection-14"><a href="#Postern"><span class="tocnumber">2.9</span> <span class="toctext">Postern</span></a></li>
<li class="toclevel-2 tocsection-15"><a href="#Great_hall"><span class="tocnumber">2.10</span> <span class="toctext">Great hall</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-16"><a href="#History"><span class="tocnumber">3</span> <span class="toctext">History</span></a>
<ul>
<li class="toclevel-2 tocsection-17"><a href="#Antecedents"><span class="tocnumber">3.1</span> <span class="toctext">Antecedents</span></a></li>
<li class="toclevel-2 tocsection-18"><a href="#Origins_(9th_and_10th_centuries)"><span class="tocnumber">3.2</span> <span class="toctext">Origins (9th and 10th centuries)</span></a></li>
<li class="toclevel-2 tocsection-19"><a href="#11th_century"><span class="tocnumber">3.3</span> <span class="toctext">11th century</span></a></li>
<li class="toclevel-2 tocsection-20"><a href="#Innovation_and_scientific_design_(12th_century)"><span class="tocnumber">3.4</span> <span class="toctext">Innovation and scientific design (12th century)</span></a></li>
<li class="toclevel-2 tocsection-21"><a href="#13th_to_15th_centuries"><span class="tocnumber">3.5</span> <span class="toctext">13th to 15th centuries</span></a></li>
<li class="toclevel-2 tocsection-22"><a href="#Advent_of_gunpowder"><span class="tocnumber">3.6</span> <span class="toctext">Advent of gunpowder</span></a></li>
<li class="toclevel-2 tocsection-23"><a href="#Bastions_and_star_forts_(16th_century)"><span class="tocnumber">3.7</span> <span class="toctext">Bastions and star forts (16th century)</span></a></li>
<li class="toclevel-2 tocsection-24"><a href="#Later_use_and_revival_castles"><span class="tocnumber">3.8</span> <span class="toctext">Later use and revival castles</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-25"><a href="#Construction"><span class="tocnumber">4</span> <span class="toctext">Construction</span></a></li>
<li class="toclevel-1 tocsection-26"><a href="#Social_centre"><span class="tocnumber">5</span> <span class="toctext">Social centre</span></a></li>
<li class="toclevel-1 tocsection-27"><a href="#Locations_and_landscapes"><span class="tocnumber">6</span> <span class="toctext">Locations and landscapes</span></a></li>
<li class="toclevel-1 tocsection-28"><a href="#Warfare"><span class="tocnumber">7</span> <span class="toctext">Warfare</span></a></li>
<li class="toclevel-1 tocsection-29"><a href="#See_also"><span class="tocnumber">8</span> <span class="toctext">See also</span></a></li>
<li class="toclevel-1 tocsection-30"><a href="#References"><span class="tocnumber">9</span> <span class="toctext">References</span></a>
<ul>
<li class="toclevel-2 tocsection-31"><a href="#Notes"><span class="tocnumber">9.1</span> <span class="toctext">Notes</span></a></li>
<li class="toclevel-2 tocsection-32"><a href="#Bibliography"><span class="tocnumber">9.2</span> <span class="toctext">Bibliography</span></a></li>
</ul>
</li>
<li class="toclevel-1 tocsection-33"><a href="#Further_reading"><span class="tocnumber">10</span> <span class="toctext">Further reading</span></a></li>
</ul>
</div>

Демонстрация jsfiddle: https://jsfiddle.net/kdhtms3b/2/