点击单独的图像时打开手风琴-Java 学习之路

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

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

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

此致，Chathu

3 回答

0
好吧，我用以下方法部分解决了我的问题：
```
$('#accordion2').show();
   $('#collapseOne').collapse('show');
```
但这有一个小问题 . 在眨眼之间，它会膨胀，坍塌然后再次膨胀 . 我确定它发生的原因是这个show（）的事情，但找不到解决方法 .
回复于 2024-05-10T16:59:53+08:00
1
当用户点击页面上的图像时，您可以在手风琴上触发事件
```
$("#accordianID").collapse('toggle');
```
要么
```
$("#accordianID").collapse('show')
```
通过这种方式，您可以远程改变手风琴的状态

参考：Bootstrap DOC
回复于 2024-05-10T16:59:53+08:00

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

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

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

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

回复于 2024-05-10T16:59:53+08:00

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

3 回答

相关问题