与手风琴标题的bootstrap手风琴在同一页面上打开div

时间:2013-08-24 10:37:05

标签: javascript jquery css twitter-bootstrap

我试图隐藏并在bootstrap手风琴旁边的div中显示图像。我正在使用的javascript工作,只有一个问题。

我希望当手风琴关闭时,用图像隐藏div,如果我点击相同的手风琴标题,这是有效的。 不幸的是,如果手风琴是打开的,我点击另一个标题div,图像隐藏。

我知道使用Jquery可能更好,或者我需要在javascript中使用参数或条件,但我是一个剪切和粘贴的人,我找不到任何我可以使用的东西或轻松修改。 这是脚本:     

function slideContent(id) {
if ($('#' + id).css('display') == 'none') {
    $('#' + id).slideDown('100', function () { });
}
else {
    $('#' + id).slideUp('100', function () { });
}
}
</script>

这是小提琴http://jsfiddle.net/C7caU/21/。 只有javascript在小提琴中不起作用,不会在点击时显示带有图像的div。为什么我不知道,它确实在浏览器中工作。 由于Shukla Jay

,这个小提琴正常运作

任何帮助将不胜感激,谢谢。

2 个答案:

答案 0 :(得分:0)

如果未指定换行设置,则默认为“onLoad”。这会导致在加载结果后将所有JavaScript包装在函数运行中。所有变量都是此函数的本地变量,因此在全局范围内不可用。

将换行设置更改为“无换行”,它将起作用:

您的引导版本文件存在一些问题。我刚把它改成了这个。

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js">  </script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Updated Fiddle See Here

答案 1 :(得分:0)

<script type="text/javascript">
var tag = '';
function slideContent(id) {
if(id == tag){
    if (($('#pics').css('display') == 'none') && (id == tag)) {
        $('#pics').slideDown('100');
        tag = id;
    }else {
        $('#pics').slideUp('100');
        tag = '';
    }
   }else{
    $('#pics').slideDown('100');
    tag = id;
}
}

</script>  

只需将#pics替换为您自己的。