Question

我的页面上有很多用于处理的下拉菜单，我需要一些帮助来理解我需要做什么才能按照我希望的方式工作。我的第一个菜单名为：Product。产品菜单有3个选项：运动，运输，和学校。这3个选项中的每一个都有自己的下拉菜单，我希望在有人选择它们时显示在产品菜单旁边。我被告知要使用这些代码，但我不知道如何使用它，也找不到任何可以解释它的东西。

    $('#Select').change(function(){
       if ($(this).val() == '1') {
           $('#select').css({'display':'block'});           
       }
    });

我现在想再采取这两个步骤。我的体育菜单有5个选项可供选择：棒球，篮球，足球，足球，和赛车。我如何写这个以显示体育菜单旁边的各个运动菜单？

我想采取的另一步：

我的赛车菜单有3个选项：Racing1，Racing2和＆amp; Racing3。我如何编写代码以显示每个人在选择它们时的内容？

在你写答案时，请你向我解释代码，因为我有更多的菜单要做，我想知道如何做到这一点，所以我可以用我的每个菜单来做。

非常感谢你的帮助。

Answer 1

这可能不会直接回答您的问题，但我认为这是我向您提出建议的责任。

而不是重新发明轮子为什么不使用已经为你构建的内容，而是开源，免费并在不同的浏览器/平台上进行大量测试。

所以我从Bootstrap Framework开始，如果你已经在使用bootstrap，那么使用菜单模块很容易实现一个菜单。

如果您想要一个独立的解决方案，那就有数千个options with CSS3 + jQuery combination。

如果您仍想从头开始编写菜单，那么您可能对this answer感兴趣。

Answer 2

K所以假设你的项目中包含jQuery，做你喜欢的事情就像这样。

首先创建标记（HTML）：

    <div class="page-container">

        <div class="selectors-container">
            <div class="selector" data-select="product">Products</div>
            <div class="selector" data-select="sports">Sports</div>
            <div class="selector" data-select="school">School</div>
        </div>

        <div class="select-menus">
            <select id="products"><define options here></select>
            <select id="sports"><define options here></select>
            <select id="school"><define options here></select>
        </div>
    </div>

请注意，所选内容的id属性等于根项目的data-select属性。

现在创建一些CSS以隐藏选择的开头，并按照您的指定格式化它们：

.selectors-container {
    float:left; //floats make things stack on eachother horizontally.
}
.select-menus select {
    display:none; //elements with display:none are invisible.
    float:left; //floats make things stack on eachother horizontally
}
.select-menus select.active {
    display:block; //we want to show a select when it has the class 'active' 
}

现在编写一些jQuery脚本以使一切正常运行。

$(".selector").mouseenter(function(event) {
    event.preventDefault(); //makes sure nothing happens that usually does when this event is triggered (redundant here).
    var selectId = $(this).data('select'); //access the element we're hovering by using the `this` keyword, it accesses the element that is triggering the event.
    $(".select-menus select").removeClass("active"); //hide all selects again
    $("#"+selectId).addClass("active"); //show the select that we're hovering.
});

现在这应该随心所欲，我确定我已经在这里和那里忘记了一些细节，但是你应该能够解决这些问题。我确定，谷歌是你的朋友。

如何编写jQuery下拉菜单

2 个答案: