html - 如何为访问过的链接添加复选标记(链接展开一段，复选表示 "done with reading it")？

Question

这是我要改进的代码

http://jsbin.com/cexixamuma/edit?html,output

链接是可折叠的，当用户点击它们时它们会折叠。Mu 的理解是 a:visited css 出于隐私原因不被较新的浏览器接受。我想让我的读者在完成该主题后可以选择勾选 (✔)，但我的问题是当用户单击链接(行)时，事件已经用于折叠、展开该行我还有什么其他选择？

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">

window.toggleDiv = function(divId) {
  var ele = document.getElementById(divId);
  var state=jQuery(ele).is(':visible');
  jQuery(ele).toggle();
  state=jQuery(ele).is(':visible');
  localStorage.setItem( divId, state);  
}


</script>

<script type="text/javascript">
    (function($){
    $( document ).ready(function() {
        $(".collapsible").each(function(index) {
                      if (typeof($(this).attr('id'))!="undefined") {
                        id=$(this).attr('id');
                        var state = localStorage.getItem(id);
                        ele = document.getElementById(id);
                        if (state=="true") {
                          ele.style.display = 'block' ;}
                        else {
                          ele.style.display = 'none'; }

                      }
                      });
    });
})(jQuery)
</script>


<link rel="stylesheet" type="text/css" href="https://aa4d96bd21c195e7b862b851b0818e89fb8ee102.googledrive.com/host/0B77cxO0Vjbb2MlYyUFpmVXhTUWc/knowledgetree.css" />

    <a class="ConceptLevel1" href="javascript:toggleDiv('PktS/h+L5EeSqM/4hMH9JA==');" style="font-

size:13pt">Root</a><br>
    <div class="collapsible" style="display:none " id="PktS/h+L5EeSqM/4hMH9JA==">
        <a class="ConceptLevel2" href="javascript:toggleDiv('KlHtq+Xe60essn+0zs9E6g==');" style="font-

size:12pt">level 1</a><br>
        <div class="collapsible" style="" id="KlHtq+Xe60essn+0zs9E6g==">
            <div>Level 2</div>
            <a class="ConceptLevel3" href="javascript:toggleDiv('EdMUp+28okWIWHVbvUaU1g==');" style="font-

size:11pt">Level 2</a><br>
            <div class="collapsible" style="" id="EdMUp+28okWIWHVbvUaU1g==">
                <a class="ConceptLevel4" href="javascript:toggleDiv('wIZCSCx/Xk2YShMAkF33Pg==');" 

style="font-size:10pt">Level 3</a><br>
                <div class="collapsible" style="" id="wIZCSCx/Xk2YShMAkF33Pg==">
                    <div>Level 4</div>
                    <a class="ConceptLevel5" href="javascript:toggleDiv('7GKbN5XRqkybT

+XsbHkyqw==');" style="font-size:9pt">Level 4</a><br>
                    <div class="collapsible" style="" id="7GKbN5XRqkybT+XsbHkyqw==">
                        <div>Level 5</div>
                        <a class="ConceptLevel6" href="javascript:toggleDiv

('rV75pTUXp0KP6Mx6EJznDg==');" style="font-size:8pt">Level 5</a><br>
                        <div class="collapsible" style="display:none " 

id="rV75pTUXp0KP6Mx6EJznDg==">
                        <div class="details">Conclusion: for all the below levels ....</div>
                            <a class="ConceptLevel7" href="javascript:toggleDiv

('a5qCUDoqI0CPlS4pPGcODQ==');" style="font-size:7pt">Level 6</a><br>
                            <div class="collapsible" style="" 

id="a5qCUDoqI0CPlS4pPGcODQ==">
                                <div>Level 7</div>
                                <div>Level 7</div>
                            </div>
                            <div>Level 6</div>
                        </div>
                    </div>
                </div>
                <div>Level 3</div>
            </div>
        </div>
    </div>

更新:我最终使用 dblclick 将段落标记为完成

Answer 1

所以基本上您需要为访问过的链接添加一个类？使用 jQuery 将是:.addClass()。