可扩展菜单（带有子菜单）和独特的突出显示的列表元素选择 [英] Expandable menu (with submenus) and unique highlighted selection of list elements
问题描述
我正在尝试创建一个包含各种子列表（最多三层）的菜单。这个想法是用户应该能够随时扩展和契约所有的选项，但是只能够选择最多一个底层列表元素（跨结构中包含的所有列表和子列表）即可。这里是我的代码：
< script type =text / javascript>
//在页面加载时，将ul的显示样式重置为'none'
document.addEventListener（DOMContentLoaded，init1）;
函数init1（）{
$（'＃Ul1'）。css（{display：none}）;
$（'＃Ul2'）。css（{display：none}）;
$（'＃Ul3'）。css（{display：none}）;
};
//单击时展开和折叠ul的函数
函数ExpCol1（arg1）{
if（$（'＃'+ arg1）.css（display）== none）{
$（'＃'+ arg1）.css（{display：block}）;
} else {
$（'＃'+ arg1）.css（{display：none}）;
};
};
//我试图在点击
$（'＃container1 li'）时强制点击container1下方的li元素来改变颜色。click（function（）{
$（这个）.css（background-color，＃FFFF00）;
}）;
< / script>
< body>
< div id =container1class =col-sm-6>
< li onclick =ExpCol1（'Ul1'）class =list-group-item>< span> Option1< / span>
< ul id =Ul1class =list-group>
< br />
< li class =list-group-item> Option1.1< / li>
< li class =list-group-item> Option1.2< / li>
< li class =list-group-item> Option1.3< / li>
< li class =list-group-item> Option1.4< / li>
< / ul>
< / li>
< li onclick =ExpCol1（'Ul2'）class =list-group-item>< span> Option2< / span>
< ul id =Ul2class =list-group>
< br />
< li class =list-group-item> Option2.1< / li>
< li class =list-group-item> Option2.2< / li>
< li class =list-group-item> Option2.3< / li>
< li class =list-group-item> Option2.4< / li>
< / ul>
< / li>
< li onclick =ExpCol1（'Ul3'）class =list-group-item>< span> Option3< / span>
< ul id =Ul3class =list-group>
< br />
< li class =list-group-item> Option3.1< / li>
< li class =list-group-item> Option3.2< / li>
< li class =list-group-item> Option3.3< / li>
< li class =list-group-item> Option3.4< / li>
< / ul>
< / li>
< / div>
< / body>
我试图构建它，以便当用户选择一个列表元素时，该元素被突出显示（当用户点击'提交'按钮时，我可以稍后将其ID转移到单独的过程中）。
我遇到的问题是我无法确定如何保持高亮选中的选项。每当由于某种原因单击列表元素时，显示样式会一直恢复为无。我也想知道是否有更好的方法来实现这种使用（或不使用？）引导框架（有点像在Windows资源管理器中选择文件的文件夹）的可展开下钻菜单。我在网上找不到任何有用的文档介绍如何做到这一点（甚至不知道这种菜单是否有一个特定的名称，我应该使用Google搜索！）。有没有人曾经创造过类似的东西？任何帮助将不胜感激。
你的jQuery是一团糟:)
试试这个自我解释代码：
jQuery（document）.ready（function（）{
$（'＃Ul1，＃Ul2，隐藏（）; //隐藏UL（s）
$（'＃container1> li'）。on（'click'，function（）{// ON PARENT LI CLICK
$（this）.addClass（'selected'）。siblings（）。removeClass（'selected'）; //将一个CLASS SELECTED
添加到所选的LI中并从其他父母中删除该类LI
$（'。selected'）。children（'ul'）。toggle（）; //显示选择
的孩子或隐藏它们
$（'。selected'）。siblings（） .children（'ul'）。hide（）; //隐藏其他父母李的UL子女（在另一个父母李被点击但有一个子女打开的情况下）
$（'。selected'）。儿童（'span'）.css（background-color，＃FFFF00）; //选择的圣地有黄色颜色
$（'。selected'）。siblings（）。children（'span'）。css（background-color，）; //所选单亲的人数/剩余白人
}）;
}）;
当然，有很多方法可以完成，我只是告诉你的逻辑。
希望这有助于，SYA;）
这是一个小提琴;）
I am trying to create a menu that contains a variety of sub lists (up to three levels). The idea is the user should be able to expand and contract all of the options at any time, but only be able to select at most one bottom level list element (across all the lists and sub lists contained within the structure). here is my code:
<script type="text/javascript">
// On page load, reset display style of ul's to 'none'
document.addEventListener("DOMContentLoaded", init1);
function init1() {
$('#Ul1').css({ "display": "none" });
$('#Ul2').css({ "display": "none" });
$('#Ul3').css({ "display": "none" });
};
// Function that expands and collapses ul when it is clicked
function ExpCol1(arg1) {
if ($('#' + arg1).css("display") == "none") {
$('#' + arg1).css({ "display": "block" });
} else {
$('#' + arg1).css({ "display": "none" });
};
};
// My attempt at forcing the clicked on li elements underneath the container1 div to change colour when clicked on
$('#container1 li').click(function() {
$(this).css("background-color", "#FFFF00");
});
</script>
<body>
<div id="container1" class="col-sm-6">
<li onclick="ExpCol1('Ul1')" class="list-group-item"><span>Option1</span>
<ul id="Ul1" class="list-group">
<br />
<li class="list-group-item">Option1.1</li>
<li class="list-group-item">Option1.2</li>
<li class="list-group-item">Option1.3</li>
<li class="list-group-item">Option1.4</li>
</ul>
</li>
<li onclick="ExpCol1('Ul2')" class="list-group-item"><span>Option2</span>
<ul id="Ul2" class="list-group">
<br />
<li class="list-group-item">Option2.1</li>
<li class="list-group-item">Option2.2</li>
<li class="list-group-item">Option2.3</li>
<li class="list-group-item">Option2.4</li>
</ul>
</li>
<li onclick="ExpCol1('Ul3')" class="list-group-item"><span>Option3</span>
<ul id="Ul3" class="list-group">
<br />
<li class="list-group-item">Option3.1</li>
<li class="list-group-item">Option3.2</li>
<li class="list-group-item">Option3.3</li>
<li class="list-group-item">Option3.4</li>
</ul>
</li>
</div>
</body>
I'm trying to build it so that when the user selects a list element, the element is highlighted (and I can transfer its ID to a separate process later on when the user clicks a 'submit' button).
The problem i'm having is that I can't work out how to keep the selected options highlighted. The display style keeps reverting back to 'none' whenever the list elements are clicked for some reason. I'm also wondering if there is a better way to implement this kind of expandable drill down menu using (or not using?) the bootstrap framework (a bit like drilling down into folders in windows explorer to select files). I couldn't find any useful documentation online about how to do it (not even sure if this kind of menu has a specific name that I should be googling instead!). Has anyone ever created anything similar before? Any help would be much appreciated.
Your jQuery is a mess :)
Try this self explained code :
jQuery(document).ready( function() {
$('#Ul1, #Ul2, #Ul3').hide(); // HIDE THE UL(s)
$('#container1 > li').on('click', function() { // ON PARENT LI CLICK
$(this).addClass('selected').siblings().removeClass('selected'); // ADD A CLASS SELECTED
TO THE CLICKED LI AND REMOVE THIS CLASS FROM OTHER PARENT LI
$('.selected').children('ul').toggle(); // SHOW THE CHILDREN OF SELECTED
OR HIDE THEM BACK
$('.selected').siblings().children('ul').hide(); // HIDE THE UL CHILDREN OF THE OTHER PARENT LI (IN CASE ANOTHER PARENT LI IS CLICKED WHILE ONE HAS HIS CHILDREN OPENED)
$('.selected').children('span').css("background-color", "#FFFF00"); // THE SAN OF SELECTED HAS A YELLOW COLOR
$('.selected').siblings().children('span').css("background-color", ""); // THE SPAN OF THE SIBLIGNS OF SELECTED ARE/REMAINS WHITE
});
});
Of course, there are many ways to accomplish it, I'm just showing you the logic.
Hope this helps, SYA ;)
And this is a fiddle ;)
这篇关于可扩展菜单（带有子菜单）和独特的突出显示的列表元素选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
