Маленькие складывающиеся треугольники: как я могу создать складные секции на веб-странице? - PullRequest
Новая
       16

Маленькие складывающиеся треугольники: как я могу создать складные секции на веб-странице?

0 голосов
/ 11 августа 2009

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

Скажем, у меня была форма, в которой были указаны имя кредитора, имя, адрес и город. Некоторым пользователям моего сайта понадобится второй набор этих полей. Я хотел бы скрыть дополнительные поля для большинства пользователей. Те, кому нужны дополнительные поля, должны иметь доступ к ним одним щелчком мыши. Как бы я это сделал?

Ответы [ 3 ]

2 голосов
/ 12 августа 2009

Ах, я думаю, вы имеете в виду, что хотите, чтобы в вашей форме были разборные секции.

Короче говоря:

  1. Поместите контент, который вы хотите свернуть, в свой собственный DIV, со свойством CSS "display: none" вначале
  2. Оберните ссылку (тег) вокруг изображения треугольника (или текста типа «Скрыть / Показать»), который запускает JavaScript для переключения свойства отображения.
  3. Если вы хотите, чтобы треугольник «поворачивался» при расширении / показе сечения, вы можете одновременно поменять JavaScript на изображении.

Вот лучшее объяснение: Как создать разборный DIV с помощью Javascript и CSS [ Обновление 2013-01-27 статья больше не доступна в Интернете, вы можете обратиться источник этой HTML-страницы для прикладного примера, вдохновленного этой статьей]

Или, если вы ищете в Google такие слова, как «Свертывающиеся разделы CSS» или что-то подобное, вы найдете много других учебных пособий, в том числе супер-необычных (например, http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).

1 голос
/ 12 августа 2009

Ваш самый простой способ скрыть / показать элемент с помощью JavaScript - установить свойство видимости элемента.

Учитывая ваш пример, представьте, что на вашей странице определена следующая форма: 

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

Здесь следует отметить две вещи:

  1. Вторая группа полей ввода изначально скрыта с помощью небольшого встроенного CSS.
  2. Ссылка "Добавить кредитора" вызывает метод JavaScript, который сделает всю работу за вас. При нажатии на эту ссылку он динамически устанавливает стиль видимости этого элемента, заставляя его отображаться на экране.

showElement() принимает в качестве параметра идентификатор элемента и выглядит следующим образом: 

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

Практически каждый подход JavaScript будет делать это под капотом, но я бы порекомендовал использовать каркас, который скрывает детали реализации от вас. Взгляните на JQuery и JQuery UI , чтобы получить более плавный переход при скрытии / показе ваших элементов.

0 голосов
/ 25 сентября 2017

Вот простое решение для CSS, использующее флажок: 

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}
<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..
...