jquaryでの右クリックメニューの表示項目を動的に追加する方法

Javascript
1【HTML】
2
3①以下のスクリプト、CSSの取り込みを宣言
4    <link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
5    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
6    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
7    <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.ui.position.min.js" type="text/javascript"></script>
8
9②HTMLの右クリック箇所
10<body>
11<p><span class="context-menu-one">right click hear!!</span></p>
12</body>
13
14【JavaScript】
15
16<script type="text/javascript">
17
18var mainmenu={};
19var historymenu={};
20
21$(function(){
22    /**************************************************
23     * Context-Menu with Sub-Menu
24     **************************************************/
25     
26     // メインメニュー表示項目の連想配列を生成
27     mainmenu={
28            "edit": {"name": "Edit"},
29            "cut": {"name": "Cut"},
30            "sep1": "---------",
31            "quit": {"name": "Quit"},
32            "sep2": "---------",
33            "fold1": {
34                "name": "Sub group", 
35                "items": {
36                    "fold1-key1": {"name": "Foo bar"},
37                    "fold2": {
38                        "name": "Sub group 2", 
39                        "items": {
40                            "fold2-key1": {"name": "alpha"},
41                            "fold2-key2": {"name": "bravo"},
42                            "fold2-key3": {"name": "charlie"}
43                        }
44                    },
45                    "fold1-key3": {"name": "delta"}
46                }
47            },
48            
49            
50            "fold1a": {
51                "name": "Other group", 
52                "items": {
53                    "fold1a-key1": {"name": "echo"},
54                    "fold1a-key2": {"name": "foxtrot"},
55                    "fold1a-key3": {"name": "golf"}
56                }
57            }
58     }
59     
60     
61     // メインメニューと履歴メニューの配列をマージ
62	var arr=mainmenu;
63	if(historymenu.length>0){
64		arr = $.extend(historymenu, mainmenu); 
65	}
66
67    // コンテキストメニューの作成処理
68    $.contextMenu({
69        selector: '.context-menu-one', 
70        callback: function(key, options) {
71        	setHistory(key, options);
72        },
73        items: arr
74        
75    });
76});
77
78// コールバック関数（右クリックメニューを選択後に呼び出される）
79function setHistory(key, options){
80  var afterKey=key+"added";
81  historymenu.afterKey = { name: options.key.name };// 選択、実行した表示項目文字列をnameキーとしてセット
82}
83</script>
84
85
86```現在、jquary+html5にて、独自の階層付き右クリックメニューを作成しております。
87
88右クリックメニューの表示自体は、以下URLを参考に作成できました。
89■参考URL：https://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html
90
91■使用プラグイン
92 jquery-1.10.2.min.js
93 jquery.contextMenu.js
94 jquery.ui.position.min.js
95 jquery.contextMenu.css
96
97【質問内容】
98上記の参考URL及びプラグインを用いて、以下２つを実現させたいと
99思っています。
100１．右クリックメニューで使用した項目について、使用履歴項目として
101   右クリックメニューの項目に追加したい。
102
103   ■イメージ
104  以下のような右クリックメニューがある場合
105
106   項目１
107   項目２
108   項目３
109     項目3-1
110         項目3-2
111
112  上記でメニュー項目２を選択し、実行した後のメニュー表示として
113
114   項目２ ←項目２を使用履歴項目として、元メニュー上側に追加表示
115   項目１
116   項目２
117   項目３
118     項目3-1
119         項目3-2
120
121  次に項目３－２を選択し、実行した後のメニュー表示として
122     
123   項目３－２ ←使用履歴項目として、元メニュー上側に追加表示
124   項目２   ←使用履歴で追加済
125   項目１
126   項目２
127   項目３
128     項目3-1
129     項目3-2
130
131  というように、元メニューと同じメニュー内に、追加で履歴項目を
132  動的に都度追加できるようにしたいです。
133
134  【試したこと】
135  元々は以下の処理がメインとなります。
136   $.contextMenu({
137        selector: selector1,
138        callback: function(key, options) {
139        },
140        items: arr
141     });
142 
143  上記のitems:arr のarrを連想配列で指定すればよいみたいだった
144  ので、以下を試しました。
145     １元メニュー用の連想配列と、履歴用の連想配列を別に用意
146   ２元メニューのcallback関数で、履歴用連想配列に項目追加
147   ３再度右クリックされたときに、上記のitemsに指定する
148    配列について、元メニュー配列と履歴用配列をマージしてセット
149
150  結果は、残念ながら何度実行しても元メニュー配列のみの
151  項目しか表示されませんでした。
152
153２．使用履歴項目の背景色の色を変更させたい。
154  元メニューと、履歴項目を一目で判別させる意図で、背景色を
155  異なる色にしたいです。
156
157  【試したこと】
158  上述のCSSを色々触ったり、class指定を変更したりしたのですが、
159  メニュー全体の色が変わるだけで、全体の一部のみの背景色を変更
160  させることができませんでした。
161
162誠にお手数なのですが、jquary,javascript,css に詳しい方
163解決策をご教示お願い致します。
164また、上記のプラグイン、やり方に固執しませんので、その他のやり方
165（javascript,jquary,css,html5のみOK）ご存知のかたいらっしゃいましたら、何卒ご教示お願い致します。
166
167
168以上