从水平下拉菜单中选择加载 iframe src

Question

我是该网站的新会员...已经使用了很长时间但从未成为会员但我无法找到答案所以我想我应该问。
我是使用 jquery 和 html 选择器的新手，所以如果这是一个简单的问题，请原谅我，但是.. 我正在使用 HTML5、css 和 jquery。我创建了一个深度为三层的水平下拉菜单。我想根据用户的选择选择要加载到 iframe 的 html 页面（每个页面代表一个报告）。当我选择一个内部 il 选择时，我得到了它的 id，但随后它继续循环遍历 li 和 ul，直到它在父 li 处结束。

==> 这是 UL > IL > IL 树：

<li id="" onclick="processRequest(id)">
    <a href="#">link 4</a>
    <ul class="sub1">
        <li id="sublink41" onclick="processRequest('sublink41.html')">  <a href="#">-link 4.1</a></li>
        <li id="sublink42" onclick="processRequest(id)"> <a href="#">-link 4.2</a></li>
        <li id="sublink43">
            <a href="#">-link 4.3</a><span class="rarrow">&#9654</span>
            <ul class="sub2">
                <li id="sublink431" onclick="processRequest(id)"><a href="#">-- link 4.3.1</a></li>
                <li id="sublink432" onclick="processRequest(id)"> <a href="#">-- link 4.3.2</a></li>

==> 这是 jQuery 函数：

function processRequest(value) {
   var selectedValue = value;
   console.log('selected values is: '+selectedValue);
   $('#frameIt').replaceWith('<iframe id="frameIt" src= "' + selectedValue + '">')
}

我想使用 ID 来识别要加载到 iframe 中的正确 html 文件，但这是我通过 chrome 工具检查时看到的...

default.aspx:71 selected values is: sublink41.html
default.aspx:71 selected values is: 

如您所见，它找到了正确的值，但随后它继续到父 LI 并在那里结束...... 我已经花了一些时间试图找到解决方案，但未能...任何帮助表示赞赏。

Answer 1

尝试将onclick 移动到<a> 标记，而不是<li> 标记。正如您的代码现在一样，单击会冒泡 DOM 并可能多次触发 processRequest()，无意中将 id 替换为您真正想要的值之外的另一个值。

这里的答案也可能对你有用：https://stackoverflow.com/a/1369080/4475757

Answer 2

删除

onclick="processRequest(id)"

来自第一行的父 li 标签。