JSFiddle - React, Tailwind, and code Playground

by DenimTornado

HTML

<div id="debug"></div>
<div class="dd collapsed">
	<div class="menu">Menu</div>
	<ul>
		<li>item 1</li>
		<li disabled="true">item 2</li>
		<li>item 3</li>
		<li>item 4</li>
	</ul>
</div>

CSS

.dd {
	display: inline-block;
}
.dd div {
	cursor: pointer;
	padding: 5px 10px;
	background: #ccc;
}
.dd.expanded div {
	color: #fff;
	background: #333;
}

.dd ul {
	margin: 0;
	padding: 0;
	position: absolute;
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
	list-style: none;
}

.dd.collapsed ul {
	display: none;
}
.dd li {
	cursor: pointer;
	padding: 5px 20px;
}
.dd li:hover {
	color: #fff;
	background: #666;
}

.dd li[disabled] {
	color: #ccc;
	cursor: text;
	background: none;
}

#debug {
	color: #666;
	font-family: Helvetica , Arial, sans-serif;
	font-size: 12px;
	line-height: 30px;
	margin-left: 70px;
	position: absolute;
}

#debug:before {
	content:'Debug: ';
}

JavaScript

/**
 * Created by Sergey Nikulin [email protected] on 16/08/14.
 */

var menu_logic = (function() {

	var collapsed = true;
	var collapse = function() {
		document.getElementsByClassName("dd expanded")[0].className = "dd collapsed";
	};
	var expand = function() {
		document.getElementsByClassName("dd collapsed")[0].className = "dd expanded";
	};

	var menu_toggle_listener = function(menu_element) {
		menu_element.addEventListener('click', function() {
			if ( collapsed === true ) {
				expand();
				collapsed = false;
				debug.innerHTML = 'Меню раскрылось';
			} else {
				collapse();
				collapsed = true;
				debug.innerHTML = 'Меню закрылось';
			}
		});
	};
	var elements_click_track_listener = function(element) {
		for (var i = 0; i < element.length; i++) {
			element[i].addEventListener('click', function(num) {
				return function() {
					var el_number = num+1;
					if (this.hasAttribute("disabled")) {
						debug.innerHTML = 'Кликнут элемент №'+el_number+' с атрибутом disabled';
					} else {
						debug.innerHTML = 'Кликнут элемент №'+el_number;
					}
				};
			}(i));
		}
	};

	return function() {
		document.addEventListener("DOMContentLoaded", function() {

			var debug = document.getElementById('debug');
			var menu_button = document.getElementsByClassName("menu")[0];
			var menu_el = document.getElementsByTagName("li");

			menu_toggle_listener(menu_button);
			elements_click_track_listener(menu_el);

		});
	};
})();

menu_logic();