18910140161

html-bootstrap移动设备上的水平折叠子菜单-堆栈溢出

顺晟科技

2022-10-19 12:46:26

126

当用户使用移动设备时,我会启动此模式

 <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Browse Categories</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <ul class="nav flex-column">
                        <li class="nav-item">
                        <a class="nav-link active" href="#" id="vone">Home & Garden</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Jewellery & Accessories</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Clothing & Shoes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Toys & Games</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Art & Collectibles</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Health & Personal Care</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Sports & Outdoors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Beauty</a>
                        </li>
                        
                    </ul>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

由于每个菜单都有一些更多的嵌套菜单,我想让用户单击以查看其他菜单并轻松地在隐藏的菜单之间导航。使用jquery和html,我遇到了这个插件

  1. https://www.jqueryscript.net/demo/sticky-header-navigation-plugin-jquery-mhead/demo/default.html

  2. https://codepen.io/hsynlms/pen/xmbgao

是否有引导插件允许移动用户像上面的插件那样在隐藏的嵌套菜单之间导航?


顺晟科技:

可以使用collaph菜单和data-bs-parent属性创建一次只打开单个菜单的“accordion”行为。..

 <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Browse Categories</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <ul class="nav flex-column">
                        <li class="nav-item">
                        <a class="nav-link active" href="#" id="vone">Home & Garden</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Jewellery & Accessories</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Clothing & Shoes</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Toys & Games</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Art & Collectibles</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Health & Personal Care</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Sports & Outdoors</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Beauty</a>
                        </li>
                        
                    </ul>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

https://codeply.com/p/pkxl46igqr

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航