JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<div id="content">
<div class="a-b-sb-z">
    <h2 class="a-ua">
        Navigation
    </h2>
    <a class="d-k a-b-k-jb a-sb-k a-sb-U2 " target="_top" href="/welcome">歡迎</a>
    <div class="a-sb-ae"> </div>
    <a class="d-k a-b-k-jb a-sb-k a-sb-U2  a-sb-k-Ea" target="_top" href="/stream">訊息串</a>
    <div class="a-sb-k-ja">
        <a class="d-k a-b-k-jb a-sb-k a-sb-Tf-k a-b-sb-Tf-k" target="_top" href="/stream/circles/">[網路]1</a>
    </div>
    <div class="a-sb-k-ja">
        <a class="d-k a-b-k-jb a-sb-k a-sb-Tf-k a-b-sb-Tf-k" target="_top" href="/stream/circles/">[網路]2</a>
    </div>
    <div class="a-sb-k-ja">
        <a class="d-k a-b-k-jb a-sb-k a-sb-Tf-k a-b-sb-Tf-k" target="_top" href="/stream/circles/">[網路]3</a>
    </div>
    <div class="a-sb-k-ja">
        <a class="d-k a-b-k-jb a-sb-k a-sb-Tf-k a-b-sb-Tf-k" target="_top" href="/stream/circles/">[網路]4</a>
    </div>
    <div class="a-sb-k-ja">
        <a class="d-k a-b-k-jb a-sb-k a-sb-Tf-k a-b-sb-Tf-k" target="_top" href="/stream/circles/">[網路]5</a>
    </div>
    <span id="test1" tabindex="0" class="d-k a-b-sb-ce-k a-sb-k a-sb-nK" role="button">
        更多
        <span id="test2" class="a-b-sb-jG a-sb-eb-p">
            &#x25BE;
        </span>
    </span>
    <a class="d-k a-b-k-jb a-sb-k a-b-sb-p1 a-sb-nK" target="_top" href="/stream/incoming">圈外訊息</a>
    <a class="d-k a-b-k-jb a-sb-k a-sb-nK" target="_top" href="/notifications/all">通知</a>
</div>
</div>

JavaScript

var g_content_debug = '<div id="debug" class="gpr_debug" style="display:none;background-color:#FFF;border: 1px solid #000;height: 100px;left:0;overflow:auto;position: absolute;top: 50px;width:50%;z-index:10000;"></div>';
$('body').append(g_content_debug);
var d = $('#debug');
function log(content){d.prepend(content + '<br />');d.show();}

document.getElementById('test1').onclick = function(){ alert('click1')}
document.getElementById('test2').onclick = function(){ alert('click2')}

function simulateClick(e) {
    if(e){
    var Event;
    Event = document.createEvent("MouseEvents");
    Event.initEvent("mousedown", true, true);
    e.dispatchEvent(Event);
    Event = document.createEvent("MouseEvents");
    Event.initEvent("click", true, true);
    e.dispatchEvent(Event);
    Event = document.createEvent("MouseEvents");
    Event.initEvent("mouseup", true, true);
    e.dispatchEvent(Event);
    }
}
function getElementsByXPath(xpath, node) {
    var nodesSnapshot = getXPathResult(xpath, node,
        XPathResult.ORDERED_NODE_SNAPSHOT_TYPE)
    var data = []
    for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
        data.push(nodesSnapshot.snapshotItem(i))
    }
    return data
}
function getFirstElementByXPath(xpath, node) {
    var result = getXPathResult(xpath, node,
        XPathResult.FIRST_ORDERED_NODE_TYPE)
    return result.singleNodeValue
}

function getXPathResult(xpath, node, resultType) {
    var node = node || document
    var doc = node.ownerDocument || node
    var resolver = doc.createNSResolver(node.documentElement || node)
    // Use |node.lookupNamespaceURI('')| for Opera 9.5
    var defaultNS = node.lookupNamespaceURI(null)

    if (defaultNS) {
        const defaultPrefix = '__default__'
        xpath = addDefaultPrefix(xpath, defaultPrefix)
        var defaultResolver = resolver
        resolver = function (prefix) {
            return (prefix == defaultPrefix)
                ? defaultNS : defaultResolver.lookupNamespaceURI(prefix)
 ...