可扩展菜单（带子菜单）和列表元素的唯一突出显示选择

时间：2017-05-09 10:45:40

标签： javascript jquery html twitter-bootstrap

我正在尝试创建一个包含各种子列表（最多三个级别）的菜单。这个想法是用户应该能够随时扩展和收缩所有选项，但只能选择最多一个底层列表元素（跨结构中包含的所有列表和子列表）< / strong>即可。这是我的代码：

<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>

我正在尝试构建它，以便当用户选择列表元素时，该元素会突出显示（稍后当用户单击“提交”按钮时，我可以将其ID转移到单独的进程）。

我遇到的问题是我无法弄清楚如何突出显示所选选项。每当单击列表元素由于某种原因时，显示样式将保持还原为“无”。我也想知道是否有更好的方法来实现这种可扩展的向下钻取菜单使用（或不使用？）引导框架（有点像在Windows资源管理器中向下钻取以选择文件）。我在网上找不到任何有用的文档如何做到这一点（甚至不确定这种菜单是否有一个特定的名称，我应该谷歌搜索！）。以前有没有人创造过类似的东西？任何帮助将不胜感激。

1 个答案:

答案 0 :(得分：0)

你的jQuery很乱:) 试试这个自我解释的代码：

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
      });
    });

当然，有很多方法可以实现它，我只是向您展示逻辑 希望这有帮助，SYA;）
这是一个fiddle;）

相关问题
最新问题