Question

获得以下购物车下拉列表

我想实现该购物车弹出。但是，没有必要在鼠标上显示，如果我可以通过点击来做到这一点。

但是，我没能看出来。请帮帮我。

MWE

<html lang="en">
<head>
    <title>Matir Dokan</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
    /* Remove the navbar's default rounded borders and increase the bottom margin */ 
    .navbar {
        margin-bottom: 50px;
        border-radius: 0;
    }

    /* Remove the jumbotron's default bottom margin */ 
    .jumbotron {
        margin-bottom: 0;
    }

    /* Add a gray background color and some padding to the footer */
    footer {
        background-color: #f2f2f2;
        padding: 25px;
    }
    .modal-backdrop
    {
        background: none;
    }
</style>
</head>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Matir Dokan</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle toggle1" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Object Type
                </a>
                <div class="dropdown-menu menu1" aria-labelledby="navbarDropdown1">
                    <a class="dropdown-item">Toy</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Furniture</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Gift</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Household</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Instrument</a>
                </div>
            </li>


            <script>

                $(function(){

                    $(".menu1 a").click(function(){

                        $(".toggle1").text($(this).text());

                    });

                });
            </script>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Material Type
                </a>


                <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
                    <a class="dropdown-item">Mud</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Cloth</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Thread</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Jute</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Cotton</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Cane</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">Bamboo</a>
                </div>
            </li>


            <script>

                $(function(){

                    $(".menu2 a").click(function(){

                        $(".toggle2").text($(this).text());

                    });

                });
            </script>

            <li class="nav-item">
                <form class="form-inline my-2 my-lg-0">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="Search">
                        <div class="input-group-append">
                            <div class="input-group-text"><i class="fa fa-search"></i></div>
                        </div>
                    </div>
                </form>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle toggle3" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Cart
                </a>
                <div class="dropdown-menu menu3" aria-labelledby="navbarDropdown3">
                    <a class="dropdown-item">
                        <div>
                            <img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park  <span class="dropdown-product-details">2 x $24.89</span>
                        </div>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">
                        <div>
                            <img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
                        </div>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item">
                        <div>
                            <img src="delete1.jpg" style="width: 40px;height: 40px"> Unionbay park
                        </div>

                    </a>
                </div>
            </li>
        </ul>
    </div>
</nav>

我希望将价格显示为主要名称的副标题，并将灰色显示为图像。右边是一个十字架。在下面两个链接“查看购物车”和“结帐”。

我使用bootstrap 4.你也可以提出想法。

如何在bootstrap 4中下载购物车？

0 个答案: