1

I need the following functionality on my page.

there's a set of images sliding from left to right. Each image corresponds to an according below it. (Note that image is NOT part of the accordion. Accordion has its own header and content, the image is separate above it). Initially, no accordion is displayed, when you click on an image the corresponding accordion is to be displayed, and all others to hide). I've used the bootstrap accordion on my page, which works fine on its own, but I'm not sure how to do the part linking that to the image slider.

Also, is there any other alternative than using the accordion here? Please note this should also support touch sliding.

Regards, Chathu

4

3 回答 3

1

当用户单击页面上的图像时，您可以在手风琴上触发事件

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

或者

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

通过这种方式，您可以远程更改手风琴的状态

参考：引导文档

于 2013-07-04T07:16:58.553 回答
0

这就是我所做的，这里是用作显示手风琴触发器的水平条。（我已替换为 ）

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

现在这可以满足我的要求，除了一件事。手风琴在显示时应展开。现在它在显示时已折叠。如何做到这一点？

另外，我不确定我是否以最好的方式做到这一点，所以如果你能提出更好的选择，我将不胜感激。

于 2013-07-05T08:12:56.407 回答
0

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

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

但这有一个小问题。眨眼间，它膨胀、塌陷，然后又膨胀。我确定这是因为这个 show() 事情而发生的，但找不到解决方法。

于 2013-07-05T12:06:27.733 回答