Форум

maxapet · #1 (**permalink**) 03.11.2016, 00:18

Есть некая форма, которую настраивает пользователь. Элементы на форме расположены вертикально в ряд. Определённую часть формы пользователь может скрывать при настройке, при этом форма по вертикали поджимается, а справа от формы нужно отображать значок-кнопку, которая будет показывать, что есть скрытый элемент. Щелчок по этой кнопке возвращает скрытый элемент и убирает её самое.
Собственно, вопрос: как позиционировать эту кнопу так, чтобы она появлялась справа от формы между предыдущим и последующим элементами скрытого элемента?
На ум не приходит ничего, кроме объявления значка position: absolute, и вычисления позиции значка-кнопки через position и offset (использую jQuery). Но может быть, у кого-то есть более простое решение? Поделитесь, pls.

Aetae · #2 (**permalink**) 03.11.2016, 00:46

Значок с position:absolute но без указания top\bottom, а только right вставленный перед\после скрытого элемента, например.

рони · #3 (**permalink**) 03.11.2016, 01:00

maxapet, по клику
заменить элемент пустышкой с css :after и наоборот

maxapet · #4 (**permalink**) 04.11.2016, 16:16

Не понял, объясните, пожалуйста.

рони · #5 (**permalink**) 04.11.2016, 16:52

maxapet,
кликнуть по любому input, потом по restore

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  form{
    width: 300px;
    height: 300px;
    border: dashed 2px #FF0000;
  }
  div{
    position: relative;
  }
  div.add{
    height: 1px;
    widows: 100%;
    background-color: #FF0000;
  }

  .add:after {
      content: "restore";
      position: absolute;
       right: -65px;
     top: -23px;

  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
   $('div').on('click',function() {
   var html = $(this).html();
   var data = $(this).data('html')||'';
   $(this).html(data).toggleClass('add');
   $(this).data('html', html)
})
});
  </script>
</head>

<body>
<form action="http://">
<div><input name=""></div>
<div><input name=""></div>
<div><input name=""></div>
<div><input name=""></div>
</form>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript