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

问题描述

我正在尝试为投资组合网站创建一个带有引导程序的图像菜单。但是导航有很大缺陷，我该如何解决这个问题？

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 秒左右，然后它跳转到完全扩展。当试图扩展位于另一个部分上方的部分时，下面的部分将向上跳半秒，然后再向下。当我将它们扩展为不同并重叠背景图像时，我也想成为链接的样式，我该怎么做？

提前致谢！

标签： htmlcsstwitter-bootstrap

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

问题描述

解决方案

推荐阅读