a/21934146/1636522

by wared

HTML

<ul id="top">
    <li>
        <ul id="foo">
            <li><p>Some text.</p></li>
            <li><p>Some text.</p></li>
            <li><p>Some text.</p></li>
        </ul>
    </li>
</ul>

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Arial;
}
body {
    padding: 1em;
}
ul {
    background: #CFE6EE;
    padding: 1em 1em .1em 1em;
}
li {
    background: #B7DAE3;
    padding: 1em;
    margin-bottom: 1em;
    list-style: none;
}
p {
    padding: .5em;
    background: #97CCDD;
}
#top {
    width: 15em;
}
#foo {
    background: yellow;
}
.target {
    background: #FF998D !important;
}
.selected,
.legend-selected {
    position: relative;
}
.selected:before,
.legend-selected:before {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 1em solid red;
    border-bottom: 0 solid red;
    border-left: 1em solid transparent;
    border-right: 0 solid transparent;
}

/* 3D mode */

.fake-3d, .fake-3d * {
    position: relative;
    left: 2em;
}

/* help panel */

#help {
    position: absolute;
    width: 7em;
    top: 1em;
    right: 1em;
    padding: .5em;
    border: 1px solid #999;
}
#help div {
    margin-top: .5em;
    border-top: 1px solid #999;
    padding: .5em 0;
}
code {
    display: block;
    font-family: Consolas, Courier;
    padding: .2em .4em;
    border-top: 1px solid white;
}

JavaScript

var selected;

$('#foo').click(function (e) {
    // this = #foo
    if (selected) {
        selected.removeClass('selected');
    }
    if (e.target === this) {
        // #foo was clicked
        selected = $(this);
        // selected <- "#foo"
    } else {
        // something inside #foo was clicked
        selected = $(e.target).closest('#foo > li');
        // selected <- "#foo > li"
    }
    selected.addClass('selected');
});

// removes the "selected" class
//   whenever a click occurs outside of #foo
// adds the "target" class
//   whenever a click occurs inside of #top

$(document).click(function (e) {
    var tgt = $(e.target);
    $('.target').removeClass('target');
    if (tgt.closest('#top').length) {
        tgt.addClass('target');
    }
    if (selected && !tgt.closest('#foo').length) {
        selected.removeClass('selected');
        selected = null;
    }
});

// help panel

$('body').append('\
<div id="help">\
    <button>&nbsp;toggle 3D&nbsp;</button>\
    <div><b>Legend</b></div>\
    <code style="background:#CFE6EE">ul</code>\
    <code style="background:#B7DAE3">li</code>\
    <code style="background:#97CCDD">p</code>\
    <code style="background:yellow">#foo</code>\
    <code style="background:#FF998D">.target</code>\
    <code class="legend-selected">.selected</code>\
</div>\
');

$('button').click(function (e) {
    $('#top').toggleClass('fake-3d');
    return false;
});