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

من این کد رو خودم نوشتم و نشد. از کسی که آموزشش رو میدیدم کپی هم کردم عینا، اما باز هم بهم ارور میده و یه سری کار ها مثل 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="images/logo.png" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="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>```

ثبت پرسش جدید

جلال محمدی

@Monsieur 1 سال پیش آپدیت شد

                <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 کار کنه
اگر این رو بهش اضافه نکنی باید حتما روی فلش کنارش کلیک کنی تا کار کنه

ارسال پاسخ

حمیدرضا بیات

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

ممنونم ازت
مشکل این بود که یه فایل JQuery رو درست اضافه نکرده بودم که کردم و رفع شد

ارسال پاسخ

وب دیزاینر

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

-1

سلام
فایل ها jquery.js رو بهتره در تگ head ضمیمه کنی
اما دیگر فایلها رو در body ضمیمه کن

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

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

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید