我正在尝试转换当前的下拉菜单实现以支持悬停单击界面。在下拉解决方案中,选择了一个项目后,将使用本地文件的内容自动填充一个文本框。这是一个简单的示例:-
<select id="selectedBaseRelease">
<script>
var currentBaseValue;
$("#selectedBaseRelease").load("~/BaseReleaseMenuNoTs.html", function() {
currentBaseValue = $(this).val();
loadbaseText(currentBaseValue);
});
</script>
</select>
...其中BaseReleaseMenuNoTs.html看起来就像:-
<option value="~/releases/O-2018.06/O-2018.06-SP2.AppOps.public">ICC2_O-2018.06-SP2</option>
<option value="~/releases/O-2018.06/O-2018.06-SP1.AppOps.public" selected >ICC2_O-2018.06-SP1</option>
<option value="~/releases/O-2018.06/O-2018.06.AppOps.public">ICC2_O-2018.06</option>
...,然后将所选文件的内容读入textInput分隔符,如下所示:-
<div class="textInput spacer">
<h2>Release #1 App Option Defaults</h2>
<textarea class="textbox" id="baseText"></textarea>
<script>
var currentBaseValue = $('#selectedBaseRelease').val();
loadbaseText(currentBaseValue);
</script>
</div>
...它就像一个魅力。但是,如果我尝试切换到这样的悬停点击界面:-
<nav id="main_nav">
<ul>
<li>
<a>ICC2</a>
<ul>
<li>
<a>O-2018.06</a>
<ul>
<li><a>SP1</a></li>
<li>
<a>SP1-T</a>
<ul>
<li><a>Jun 29, 2018</a></li>
<li><a>Aug 29, 2018</a></li>
<select id="selectedBaseRelease">
<script>
var currentBaseValue;
$("#selectedBaseRelease").load("~/releases/O-2018.06/O-2018.06-SP2-T.AppOps.public.hidden", function() {
currentBaseValue = $(this).val();
loadbaseText(currentBaseValue);
});
</script>
</select>
</ul>
</li>
<li><a>Base</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
...需要进行哪些更改才能将选定的“ 2018年8月29日”文件读入textInput分隔符?当前,当我选择“ 2018年8月29日”时,什么也不会发生。我要改进的下拉菜单界面在这里:-
https://jsfiddle.net/e4bunLvh/68/
...但是并非所有支持文件都可用,因此不能通过JSFiddle 100%起作用。