Как сделать список при клике?

Question

[Minningt]

Добрый вечер. Подскажите, как можно сделать выпадающий список при клике на блок? Если кликнули мимо, то список пропадает.
Задача заключается в том, что при нажатии на блок появляется список. При клике на список должно выполняться действия на js, например, посчитать сумму чисел.
Мы нажимаем на блок "Действие 1" и должен показаться список, а при клике на значение должен появиться блок с полями для ввода данных и кнопка "Посчитать".
При клике на блок "действие 2" должен показаться список другой и там другие поля и кнопка "Посчитать".
Подскажите, как это сделать грамотно и правильно.
jsfiddle.net/z9onf1nh/2

Answer 1

[Алексей Колесников]

Зачем клик? Делай при наведении, это удобнее.

<div id="main">
    <table>
      <thead>
        <tr>
          <td><div class="but">Действие 1<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
          <td><div class="but">Действие 2<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
          <td><div class="but">Действие 3<ul><li>1</li><li>2</li><li>3</li></ul></div></td>
        </tr>
      </thead>
    </table>
  </div>

table td { padding:10px 50px; background-color: green; color:white;}
  table a {color:white; text-decoration:none;}
.but {display:block; cursor:pointer; position: relative;}
.but ul {display:none;}
.but:hover ul {display:block; position:absolute; left:0; top:100%; padding:0; margin:0; list-style:none;z-index:2; width:100%; background:#ccc;}
.but ul li {display:block; padding:5px; color:#000;}
.but ul li:hover {color:#FFF; background:#666}

Comments

[RudFox]

А зачем умничать? Человек просит при клике, значит ему нужно при клике, а не при наведении.

Answer 2

[Максим Чалов]

Например, вот так (и список, и кнопка): https://jsfiddle.net/6tk57ww0/

Answer 3

[Юрий]

Почему вы используете таблицы для верстки, ведь гораздо проще и семантически правильно с помощью чистых списков ul (тем более, что вы используете многоуровневые списки - доступно с некоторыми простыми операциями здесь) или ol.

Также эту задачу можно решить с помощью псевдокласса :checked в CSS, он поддерживается, начиная с IE 9.0+, Chrome 1.0+, Opera 9.0+, Safari 3.1+, Firefox 1.0+, Android 1.0+, iOS 2.0+. Но сделать также легко, как это можно сделать с помощью JS, тут не получится, но я сторонник того, чтобы все что можно сделать без JS, нужно делать без JS)