单击显示/隐藏div

时间:2013-10-28 17:37:12

标签: javascript jquery html html5

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

到目前为止,这是我的代码:

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

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

每次单击“按钮”时,表格底部都会显示带有说明的新div。 (底部的蓝色div)。如果单击另一个按钮,则前一个描述应该关闭,另一个应该在同一个地方打开。 (尚未实施)

提前感谢您的帮助!

6 个答案:

答案 0 :(得分:2)

不要使用$.next,它只选择当前元素的兄弟:

  

获取该组中每个元素的紧随其后的兄弟   匹配的元素。如果提供了选择器,它将检索下一个选择器   只有当它与那个选择器匹配时才是兄弟姐妹    - jQuery documentation: .next()

使用正常的:

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

答案 1 :(得分:2)

如果元素具有唯一ID,为什么要选择下一个元素?

$(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");
    });
});

答案 2 :(得分:2)

修正了它。

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

首先,它看起来像你的切换div是错误形成的。我没有看到

其次,如果你知道另一个div的ID是什么,你不需要说:

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

,这没有任何意义。

答案 3 :(得分:1)

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

删除this;)

答案 4 :(得分:1)

试试这个

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

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

答案 5 :(得分:0)

您可以通过 ID选择器

直接进行此操作

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

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