Question

我的页面上需要以下功能。

有一组图像从左向右滑动。每个图像对应于下面的相应图像。（请注意，图像不是手风琴的一部分。手风琴有自己的标题和内容，图像在其上方是独立的）。最初，没有手风琴显示，当您点击图像时，将显示相应的手风琴，并显示所有其他手风琴）。我在我的页面上使用过bootstrap手风琴，它本身可以正常工作，但是我不知道如何将它连接到图像滑块。

此外，除了在这里使用手风琴之外还有其他选择吗？请注意，这也应该支持触摸滑动。

此致 Chathu

Answer 1

当用户点击页面上的图片时，您可以触发手风琴上的活动

$("#accordianID").collapse('toggle');

OR

$("#accordianID").collapse('show')

通过这种方式你可以远程改变手风琴的状态

价：Bootstrap DOC

Answer 2

这就是我所做的，这里是水平条，充当触发器来显示手风琴。（我已经替换了）

<ul id="zoneSlider">
        <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #c11e07;">
            <div onclick="OperateAccordion(1)"; class="flex-caption_slider" style="background: #c11e07; height: 131px;">End the wait</div>
        </li>

        <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #ff9400;">
            <div onclick="OperateAccordion(2)"; class="flex-caption_slider" style="background: #ff9400; height: 131px;">Intelligence @ the sales floor</div>
        </li>

        <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #0ea913;">
           <div onclick="OperateAccordion(3)"; class="flex-caption_slider" style="background: #0ea913; height: 131px;">Helping store associates do more with less</div>
        </li>

        <li class="legacy_slider" style="width: 300px; height: 131px; float: left; display: block; background: #00a9ec;">
           <div onclick="OperateAccordion(4)"; class="flex-caption_slider" style="background: #00a9ec; height: 131px;">Let's help save water</div>
        </li>
    </ul>

然后我使用了单独的手风琴：

        <div class="accordion" id="accordion1">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">END THE WAIT
                </a>
            </div>
            <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordio2" href="#collapseTwo">END THE WAIT
                </a>
            </div>
            <div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
                </div>
            </div>
        </div>
    </div>

    <div class="accordion" id="accordion3">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordio3" href="#collapseThree">END THE WAIT
                </a>
            </div>
            <div id="collapseThree" class="accordion-body collapse" style="height: 0px;">
                <div class="accordion-inner">
                </div>
            </div>
        </div>
    </div>

以下是我用来控制显示的JS：

        <script language="javascript">
        $(document).ready(function () {
            $('#accordion2').hide();
            $('#accordion3').hide();
            $('#accordion4').hide();
            $('#accordion5').hide();
        });

        function OperateAccordion(index) {
            if (index == 1) {
                $('#accordion3').hide();
                $('#accordion4').hide();
                $('#accordion5').hide();
                $('#accordion2').show();
            }
            else if (index == 2) {
                $('#accordion2').hide();
                $('#accordion4').hide();
                $('#accordion5').hide();
                $('#accordion3').show();
            }
            else if (index == 3) {
                $('#accordion2').hide();
                $('#accordion3').hide();
                $('#accordion5').hide();
                $('#accordion4').show();
                //$("#accordion3").collapse();
            }
            else if (index == 4) {
                $('#accordion2').hide();
                $('#accordion3').hide();
                $('#accordion4').hide();
                $('#accordion5').show();
            }
        }
    </script>

现在这样做我想要的，除了一件事。手风琴应该在显示时被吹走。现在它在显示时崩溃了。怎么做到这一点？

此外，我不确定我是以最好的方式做到这一点，所以如果你能提出更好的选择，那就表示赞赏。

Answer 3

好吧，我通过以下方式部分解决了我的问题：

   $('#accordion2').show();
   $('#collapseOne').collapse('show');

但这有一个小问题。在眨眼之间，它会膨胀，坍塌然后再次膨胀。我确定它发生的原因是这个show（）的事情，但无法找到解决方法。

点击单独的图像时打开手风琴

3 个答案: