Question

我正在尝试为投资组合网站创建带有引导程序的图像菜单。但是导航存在严重缺陷，我该如何解决？

https://codepen.io/wouter0102/pen/XoGaEe

<div id="main">
        <div id="accordion" class="accordion">
            <div id="Newbornpix" class="collapse show" data-parent="#accordion">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quae, reprehenderit ex, dolorum tempora enim sequi dolor aliquam, rerum quos maxime soluta. Quos quas at voluptas ipsam, ea! Ab, fuga.
                </p>
            </div>
            <div id="Newbornbutton" class="collapsed button">
                <a href="#Newbornpix" data-toggle="collapse">NEWBORN</a>
            </div>
            <div id="Geboortepix"  class="collapse" data-parent="#accordion">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, veniam ipsum ut ad, incidunt veritatis, culpa qui dolorum odio et recusandae quod quisquam rerum saepe libero sed commodi laborum repudiandae.
                </p>
            </div>
            <div id="Geboortebutton" class="collapsed button">
                <a href="#Geboortepix" data-toggle="collapse">GEBOORTE</a>
            </div>
            <div id="Portretpix"   class="collapse" data-parent="#accordion">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores laborum voluptatum facilis voluptates assumenda beatae maxime nobis aliquid ullam natus modi saepe commodi, inventore repellat ad qui! Quasi, iure.
                </p>
            </div>
            <div id="Portretbutton" class="collapsed button">
                <a href="#Portretpix" data-toggle="collapse">PORTRET</a>
            </div>
            <div id="Contact"   class="collapse" data-parent="#accordion">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque dolorem aperiam pariatur eos vitae molestias, ipsam quasi iusto repellat expedita similique sequi quas ex quisquam porro nemo distinctio explicabo. Magni!
                </p>
            </div>
            <div id="Contactbutton" class="collapsed button">
                <a href="#Contact" data-toggle="collapse">CONTACT</a>
            </div>
        </div>
    </div>
<script>
    $('[data-toggle="collapse"]').on('click',function(e){
        if ( $(this).parents('.accordion').find('.collapse.show') ){
            var idx = $(this).index('[data-toggle="collapse"]');
            if (idx == $('.collapse.show').index('.collapse')) {
                e.stopPropagation();
                }
        }
    });    
</script>

编辑因此，我的意思是说它有缺陷，如果您查看Codepen链接，您会发现过渡效果不佳，塌陷的tekst必须跳到其位置。您会看到它从某个位置开始，然后跳到需要的位置。另外，如果正在发生过渡，您会看到它很好地扩展了1秒钟左右，然后跳到完全扩展。尝试扩展位于另一节上方的节时，其下的节将跳升半秒，然后再下移。当我将链接扩展为不同并与背景图像重叠时，我也想成为链接的样式，该怎么做？

提前谢谢！

Answer 1

您正在使用两种不同的jQuery库，一种在<head>中，另一种在页面底部。它们互相阻止运行（$由第二个库重新分配）。删除其中之一，您的代码即可正常工作。或者，您可以使用第二个库中的jQuery noConflict(true)来同时使用两者。但是，不建议这样做。

尝试使用引导程序创建图像菜单

1 个答案: