Показать / Скрыть Div или Элемент

Question

Я посетил сайт, и функция меня очень развлекла, но я не могу понять, как ее воспроизвести!XD Может ли кто-нибудь мне помочь?

Я бы хотел воспроизвести функциональность уведомления об авторском праве этого сайта, чтобы мои сайты были признательны мне и моему коллеге.

Я действительно ценю это.Спасибо.

Answer 1

Если вы используете браузер или расширение, которое позволяет щелкнуть правой кнопкой мыши «Проверка элемента», вы можете напрямую посмотреть код для элементов страницы. Здесь страница использует новый тег [<details>][1], новый в HTML5. Похоже, это выглядит так:

<details>
  <summary>Always show this</summary>
  <p>This stuff is hidden until you click the arrow.</p>
  <p>Woooo!</p>
</details>

Нет Javascript / jquery, с которым можно было бы связываться, хотя, вероятно, тоже есть какой-то CSS. Это очень крутой новый элемент!

(Обычно это делается с помощью jQuery show () / hide (), как описано в других ответах и ​​комментариях. Я подозреваю, что он был добавлен в HTML5, потому что это очень распространенная функция.)

Answer 2

Вы можете реализовать с помощью jQuery slideToggle ().

<div id="inner">
  <div class="text">
  Your Text
  </div>
</div


$(document).ready(function(){
$(".text").hide();
$("#inner").click(function(){
$(".text").slideToggle();
});
});

Вы можете увидеть больше информации здесь http://www.sendesignz.com/index.php/jquery/72-how-to-implement-toggle-search-box-in-jquery

Answer 3

Сайт, на который вы ссылаетесь, использует библиотеку jQuery . Это действительно очень просто. Заявление, подобное этому

$("#mydiv").hide();

скроет <div> с идентификатором "mydiv". Вы также можете show вместо hide, и вы можете передать число в функцию, например, hide(200), чтобы оживить действие. В этом случае анимируйте скрытие div в течение 200 мс.

Существует также toggle эффект , который альтернативно скрывает или показывает элемент.

Я рекомендую вам прочитать о событиях и селекторах jQuery в документации jQuery .

Также в будущем, Погуглите ваш вопрос , прежде чем спросить, это может сэкономить вам некоторое время; -)

---

Редактировать

На самом деле конкретная функция, которую вы описываете на сайте, на который вы ссылаетесь, обрабатывается с помощью элемента HTML5, о котором говорит andronikus . Возможно, HTML5 еще не готов к использованию в Интернете, поскольку все еще существует множество браузеров, которые не могут его обработать. На мой взгляд, использование jQuery show / hide является лучшим решением на данный момент.