JSFiddle - React, Tailwind, and code Playground

by Rahul Sharma

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<p>Lorem ipsum dolor sit amet, amet etiam nostro no mel, quot nusquam offendit vix no, at velit corpora mentitum sed. Eam verear tincidunt ex, usu ea iriure gubergren. Ex has agam minim delenit, ad populo cetero appetere eum. Affert munere reprimique ne eam. Ad constituto voluptatibus duo. Vim corpora fierent ocurreret ei, libris feugait ullamcorper usu ad, no prima assum sit.</p>
Select an option ...
<div>
    <div id="menutest" />
</div>
<p>Lorem ipsum dolor sit amet, amet etiam nostro no mel, quot nusquam offendit vix no, at velit corpora mentitum sed. Eam verear tincidunt ex, usu ea iriure gubergren. Ex has agam minim delenit, ad populo cetero appetere eum. Affert munere reprimique ne eam. Ad constituto voluptatibus duo. Vim corpora fierent ocurreret ei, libris feugait ullamcorper usu ad, no prima assum sit.</p>

CSS

.ui-menu {
    width: 200px;
    position: absolute;
}
.listSelectValue {
    width: 100px;
    height: 20px;
    padding: 3px;
    border: 1px solid #AAA;
}
.listSelectValue::after {
    border-left:1px solid black;
    padding-left: 2px;
    float:right;
    content:'â–˝'
}

JavaScript

$.widget("mc.droplist", {
    options: {},
    _createList: function (node, element) {
        var self = this;
        $.each(node, function (i, e) {
            var li = $("<li>").append($("<a href='#'>").text(e.label));
            if (e.sublist.length > 0) {
                li.find("a").data("hasChildren", true);
                var sublist = $("<ul>");
                self._createList(e.sublist, sublist);
                li.append(sublist);
            }
            element.append(li);
        });
    },
    _create: function () {
        var self = this;

        this.textBox = $("<div class='listSelectValue' />").text(this.options.list[0].label);

        this.menu = $("<ul class='menu' />");
        this._createList(this.options.list, this.menu);

        this.menu.menu();
        this.menu.hide();
        this.textBox.appendTo(this.element);
        this.menu.appendTo(this.element);
        this.textBox.click(function (e) {
            self.menu.css({
                left: e.currentTarget.offsetLeft,
                top: e.currentTarget.offsetTop + e.currentTarget.clientHeight
            });
            self.menu.slideDown();
        });

        this.menu.mouseleave(function () {
            self.menu.hide();
        })

        this.menu.click(function (e) {
            if (!self.options.sublistClickable && $(e.target).data("hasChildren")) 
                return;
            self.textBox.text($(e.target).text())
            self.menu.hide();
        });
    }

});

$(document).ready(function () {
    $("#menutest").droplist({
        sublistClickable: false,
        list: [{
            label: 'test1',
            sublist: []
        }, {
            label: 'tes2',
            sublist: []
        }, {
            label: 'tes3',
            sublist: [{
                label: 'test3.1',
                sublist: []
            }, {
                label: 'tes3.2',
                sublist: [{
                    label: 'test3.2.1',
                   ...