单击图像时引导程序崩溃答案

【问题标题】：Bootstrap collapse when clicking on images单击图像时引导程序崩溃
【发布时间】：2015-04-26 18:06:47
【问题描述】：

我正在为音乐节（小型）创建一个网站。就像你在这个例子中看到的那样：http://bioa7.belleileonair.org/（这只是一个测试网站）。当我单击图像时，我想折叠 div，以显示有关艺术家的信息。当我单击其他图像时，我想隐藏活动 div 然后显示与图像单击相对应的另一个。

在询问 stackoverflow 之前，我已经尝试了一些与引导崩溃相关的代码。就像您在单击图像时在“Samedi soir”部分看到的那样，它可以工作，但是如果我单击第二个图像，则与第一个图像相关的 div 不会关闭。我认为需要 Javascript，但我对此一无所知。

我想要一些关于我想做什么的建议。在这种情况下，折叠功能是最佳解决方案，还是另一种解决方案更好？

我的代码：

    <section id="saturday-night">
        <div class="full-container">
        <div class="row">
        <h2>Samedi Soir</h2>
        <div class="panel-group" id="accordion">
                <div class="grid">

                        <div class="panel panel-default">

                            <figure class="effect-lily">
                                <img src="images/artistes/12.jpg" alt="img12"/>
                                <figcaption>
                                    <div>
                                        <h2>First <span>Image</span></h2>
                                        <p>Lily likes to play with crayons and pencils</p>
                                    </div>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
                                </figcaption>           
                            </figure>
                        </div>

                        <div class="panel panel-default">

                            <figure class="effect-lily">
                                <img src="images/artistes/12.jpg" alt="img12"/>
                                <figcaption>
                                    <div>
                                        <h2>Second <span>image</span></h2>
                                        <p>Lily likes to play with crayons and pencils</p>
                                    </div>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 1</a>
                                </figcaption>           
                            </figure>
                        </div>

                            <div id="panel1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p>Contents panel 1</p>
                                </div>
                            </div>

                            <div id="panel2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    Contents panel 2
                                </div>
                            </div>
                </div>
        </div>

...

【问题讨论】：

请在此处显示您的代码。当您发布此问题时，您应该已经收到通知。
我终于找到了解决方案...您可以在此处查看代码：jsfiddle.net/XqshE/2 但我想使用引导类“hidden”和“show”而不是创建的“hidee”类显示 div。我真的不知道如何更改此 javascript 代码。我已经尝试过 .switchclass jquery 函数，但它不起作用。谢谢
很高兴听到。请在下方提供答案或删除您的问题。

标签： javascript css image twitter-bootstrap collapse

【解决方案1】：

这太简单了。只需在引导程序上正确设置您的折叠选项卡即可。只需将该选项卡的文本替换为图像 src。让一切保持原样。就是这样。

【讨论】：