代码之家 › 专栏 › 技术社区 › xinp4chi

Div下拉菜单显示/隐藏onclick jquery

drop-down-menu html jquery

xinp4chi · 技术社区 · 10 年前

我正在尝试实现一个div下拉菜单。

JQuery此处:

<script>
    $(document).ready(function() {
        $('.desplegar').click(function() {
            $(this).next("div.desplegar_fills").show().siblings("div.desplegar_fills").hide();              
        });
    });
</script>

我知道这个jquery只能显示Subindex级别,但我甚至无法使它工作。

此处为HTML:

<div class="desplegar">
        <p>Index 1</p>
        <div class="desplegar_fills">
            <p>Subindex 1</p>
            <div class="desplegar_links">
                <a href="#">EnllaÃ§ 1</a>
                <a href="#">EnllaÃ§ 2</a>
                <a href="#">EnllaÃ§ 3</a>
            </div>
        </div>
    </div>
    <div class="desplegar">
        <p>Index 2</p>
        <div class="desplegar_fills">
            <p>Subindex 2</p>       
            <div class="desplegar_links">
                <a href="#">EnllaÃ§ 1</a>
                <a href="#">EnllaÃ§ 2</a>
                <a href="#">EnllaÃ§ 3</a>
            </div>
        </div>      
    </div>
    <div class="desplegar">
        <p>Index 3</p>
        <div class="desplegar_fills">
            <p>Subindex 3</p>       
            <div class="desplegar_links">
                <a href="#">EnllaÃ§ 1</a>
                <a href="#">EnllaÃ§ 2</a>
                <a href="#">EnllaÃ§ 3</a>
            </div>
        </div>      
    </div>

它应该是这样的:

所以,如果我点击索引1,它会显示子索引1,如果我单击子索引1它会显示链接。问题是,如果我单击索引2或索引3,索引1应该关闭,只显示子索引2或子索引3(取决于单击的是哪个)。有糖吗?感谢大家!

1 回复 | 直到 10 年前

SamGhatak 10 年前

请找到答案 here .

基本上,这个脚本应该完成以下工作:

$(document).ready(function() {
    $('.desplegar_fills').hide(0);
    $('.desplegar_links').hide(0);
    $('.desplegar').click(function() {
        $('.desplegar_fills').hide(0);
        $('.desplegar_links').hide(0);
        $(this).find(".desplegar_fills").show(0);
    });
    $('.desplegar_fills').click(function(e){
        $('.desplegar_links').hide(0);
        $(this).find(".desplegar_links").show(0);
        e.stopPropagation();
    })
});

推荐文章

Yahya · 不能将我保存在props中的id用作reactselect中的默认值

1 年前

RSW · 使用plotly绘制多个pandas列,并使用下拉菜单选择列

1 年前

Jake Hembree · 多个下拉框

2 年前

MaÅ¥o Valapka · 下拉菜单会扭曲其他按钮

2 年前

Santi · Shadcn/ui选择-当用户选择项目时更改状态

2 年前

João Bosco · 使用python player从选择下拉列表中选择一个值

2 年前

Xeschoz · 为discord bot制作下拉菜单时出错

2 年前

Meghan M. · JS新手:NodeList返回null但有元素

2 年前

Hiyanneri · CSS-如何使用CSS增加下拉列表的宽度?

2 年前

T.Omalley · 数据验证源Excel中的嵌套函数

2 年前