单击时显示/隐藏 div答案

【问题标题】：Show/Hide a div on click单击时显示/隐藏 div
【发布时间】：2013-10-28 17:37:12
【问题描述】：

我正在编写一个小脚本来在单击其他 div 时显示/隐藏一个 div，但我无法让第二个 div 可点击。

到目前为止，这是我的代码：

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $(this).next('div#ordontia2').slideToggle("slow");
    });
});

http://jsfiddle.net/65AK2/1/

每次单击“按钮”时，表格底部都会出现一个带有描述的新 div。（底部的蓝色 div）。如果单击另一个按钮，则前面的描述应该关闭，另一个描述应该在同一个地方打开。（尚未实施）

提前感谢您的帮助！

【问题讨论】：

你的#ordontia2 div 在哪里？
@ComFreek 在底部。
@biip：你想为每个按钮设置这个吗？然后你应该使用你的botaomedicina 类。看我的回答。

标签： javascript jquery html

【解决方案1】：

如果元素具有唯一 ID，为什么要选择带有 next 的元素？

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $('div#ordontia2').slideToggle("slow");
    });
});

如果添加更多 div，则更通用：

$(document).ready(function(){
    $('.botaomedicina').click(function(){
        $('#'+$(this).attr('id')+'2').slideToggle("slow");
    });
});

所有其他人都关闭：

$(document).ready(function(){
    $('.botaomedicina').click(function(){
        $('.botaomedicinadescription').slideUp("slow");
        $('#'+$(this).attr('id')+'2').slideToggle("slow");
    });
});

【讨论】：

谢谢，第二个几乎正是我想要的！我只需要确保 div 在新的打开之前关闭。也许是这样的？ $('.descricamedicina').slideToggle(0);在function()的第一行之前？

【解决方案2】：

不要使用$.next，它只会选择当前元素的兄弟姐妹：

获取集合中每个元素的紧随其后的兄弟匹配的元素。如果提供了选择器，它将检索下一个仅当它与该选择器匹配时才为同级。
— jQuery documentation: .next()

使用普通的：

$('div#ordontia2').slideToggle("slow");

【讨论】：

【解决方案3】：

修复它。

http://jsfiddle.net/65AK2/2/

首先，看起来您切换的 div 格式错误。我没有看到它的。

其次，如果你知道其他div的ID是什么，就不用说了：

$(this).next("#item");

，没有意义。

【讨论】：

【解决方案4】：

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $('div#ordontia2').slideToggle("slow");
    });
});

删除this ;)

【讨论】：

【解决方案5】：

试试这个

$(document).ready(function(){
    $('div#ordontia').click(function(){
        $('div#ordontia2').slideToggle("slow");
    });
});

更新小提琴http://jsfiddle.net/65AK2/4/

【讨论】：

【解决方案6】：

你可以直接通过ID选择器

http://jsfiddle.net/65AK2/3/

$(document).ready(function(){
    $('#ordontia').click(function(){
        $('#ordontia2').slideToggle("slow");
    });
});

【讨论】：