在与带有手风琴标题的引导手风琴相同的页面上打开 div答案

【问题标题】：open div on same page as bootstrap accordion with accordion heading在与带有手风琴标题的引导手风琴相同的页面上打开 div
【发布时间】：2013-08-24 10:37:05
【问题描述】：

我正在尝试在引导手风琴旁边的 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，这个小提琴现在可以正常工作了

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

【问题讨论】：

您的 javascript 无法正常工作的问题已解决。我不明白你的其他问题。检查ans并随时询问是否存在任何问题。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

如果您不指定换行设置，则默认为“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 FiddleSee Here

【讨论】：

感谢您解决 javascript。我想要做的是当单击手风琴的标题时，显示包含图像的 div 与此脚本一起使用。但是如果手风琴打开并且我单击图像隐藏的另一个标题，我希望它们显示。因此，当手风琴打开时，总是会显示图像。在小提琴中，当您单击它们时会打开标题，这不是我想要的，当时应该只显示 1 个手风琴内容。
我也在研究它并把 2.3.1.同样，唯一的问题是带有图像的 div 不在手风琴旁边。我想在 javascript 中添加一些东西，当点击手风琴标题时，图像会显示，如果我点击另一个手风琴标题仍然显示图像，当手风琴关闭时，只有 2 幅图像在手风琴旁边可见。感谢您到目前为止的帮助，希望您也可以解决这个问题。
对不起，我没有得到你。你想要什么。
是否有可能我可以隐藏 div，当我点击另一个标题时保持打开状态，因为现在每次点击时，无论我点击哪个标题，javascript 都会隐藏或显示 div。所以点击标题 div 显示，点击另一个标题显示的 div 保持打开状态，除非你点击同一个标题。
我做了一个新的小提琴jsfiddle.net/j2KSB/.Now 它正在显示手风琴旁边的图像。我不得不扩大显示结果的窗口。当我单击另一个手风琴标题时，必须添加一些 javascript 以保持 div（图片）打开。

【解决方案2】：

<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>

只需将 # 张图片替换为您自己的图片即可。

【讨论】：