کار نکردن بوت استرپ

من این کد رو خودم نوشتم و نشد. از کسی که آموزشش رو میدیدم کپی هم کردم عینا، اما باز هم بهم ارور میده و یه سری کار ها مثل dropdown یا menu toggler رو انجام نمیده و کار نمیکنه. فکر میکنم مشکل از فایل های اسکریپتم باشه چون insite که میگیرم اون پایین این ارور ها رو میده:
bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token ':'
همین رو برای فایل های popper و jquery هم میده. با اینکه آدرسشون رو چک کردم و درست بود


<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Dove</title>
    <link rel="title icon" type="image/png" href="https://roocket.ir/images/logo.png" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://roocket.ir/css/main.css" />
    <link rel="stylesheet" href="https://roocket.ir/css/bootstrap.fa.min.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
    />
  </head>
<body>
    <!-- navbar  -->
    <nav class="navbar navbar-light navbar-expand-md shadow-sm">
        <button class="navbar-toggler" data-toggle="collapse" data-target="#coll">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a href="" class="navbar-brand text-warning ml-3">
            <i class="fas fa-dove ml-3" style="font-size: 25px;"></i>
        </a>
        <div class="collapse navbar-collapse" id="coll">
            <ul class="navbar-nav list-unstyled my-3 my-md-0">
                <li class="nav-item mx-2"><a href="" class="nav-link">خانه</a></li>
                <li class="nav-item mx-2"><a href="" class="nav-link">گالری</a></li>
                <li class="nav-item mx-2 dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">محصولات</a>
                    <div class="dropdown-menu">
                      <a href="" class="dropdown-item">مرطوب کننده</a>
                      <a href="" class="dropdown-item">صابون</a>
                      <a href="" class="dropdown-item">پک داو</a>
                    </div>
                  </li>
                <li class="nav-item mx-2"><a href="" class="nav-link">مشتری</a></li>
            </ul>
        </div>
        <form action="" class="form-inline mr-auto ml-5">
            <div class="input-group">
                <input type="text" placeholder="جست و جو" class="form-control text-center">
                <div class="input-group-append">
                    <button class="btn btn-outline-dark">
                        <i class="fas fa-search d-flex justify-content-center align-self-center"></i>
                    </button>
                </div>
            </div>
        </form>
    </nav>
    <!-- navbar end  -->

    <script src="script/jquery-3.3.1.slim.min.js"></script>
    <script src="script/popper.min.js"></script>
    <script src="script/bootstrap.min.js"></script>

</body>
</html>```

جاوااسکریپت javascript bootstrap html

حمیدرضا بیات

@hamidangel

ثبت پرسش جدید

پاسخ‌ها

جلال محمدی

@Monsieur3 سال پیش مطرح شد

                <li class="nav-item mx-2 dropdown">
                    <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown">محصولات</a>
                    <div class="dropdown-menu">
                      <a href="" class="dropdown-item">مرطوب کننده</a>
                      <a href="" class="dropdown-item">صابون</a>
                      <a href="" class="dropdown-item">پک داو</a>
                    </div>
                  </li>

data-toggle رو به data-bs-toggle تغییر بده
و کد جاوا ی زیر رو بهش اضافه کن.باید کار کنه

                <li class="nav-item mx-2 dropdown">
                    <button class="nav-link dropdown-toggle"  data-bs-toggle="dropdown" aria-expanded="false">محصولات</button>
                    <div class="dropdown-menu">
                        <a href="" class="dropdown-item">مرطوب کننده</a>
                        <a href="" class="dropdown-item">صابون</a>
                        <a href="" class="dropdown-item">پک داو</a>
                    </div>

                </li>

        const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
        const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))

"aria-expanded="false این هم برای اینه که اگر روی متن کلیک کردی باز هم dropdown کار کنه
اگر این رو بهش اضافه نکنی باید حتما روی فلش کنارش کلیک کنی تا کار کنه

ارسال پاسخ