القائمة المنسدلة لا تعمل - Bootstrap

محمد خالد39 · 8 يونيو 2022

<!DOCTYPE html>
<html>
    <head>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js" type="test/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

    </head>
    <body>
      <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                  aria-expanded="false">
                  Dropdown
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Disabled</a>
              </li>
            </ul>
            <form class="d-flex" role="search">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    </body>
</html>

كيف ا حل مشكلة القائمة المنسدلة

jquery

أسامة زيادة · 8 يونيو 2022

ما إصدار البوتستراب الذي تعمل عليه ؟ في حال كنت تعمل على Bootstrap 5 لن تحتاج إلى jquery ، ثم أرجو منك التأكد من الوصول إلى ملفات CSS و JS بشكل صحيح ، أيضاً قوم بنقل script الخاص في JS في أسفل الصفحة بهذا الشكل .

    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap.min.js" type="test/javascript"></script>
    </body>
</html>

محمد خالد39 · 8 يونيو 2022

https://www.raed.net/file?id=77008

هذا رابط تحميل ملف المشكلة في الأيقونة التي اسمها test

تم التعديل في 8 يونيو 2022 بواسطة محمد خالد19

أسامة زيادة · 9 يونيو 2022

بتاريخ 23 ساعات قال محمد خالد19:

https://www.raed.net/file?id=77008

هذا رابط تحميل ملف المشكلة في الأيقونة التي اسمها test

يبدو أن المشكلة لديك في اصدار نسخة بوتستراب ، لقد لاحظت أنك تستخدم نسخة beta1 ويبدو أنه قد تم تحديثها ، لذلك لمعالجة المشكلة لقد استخدام cdn الخاص في إصدار 5.1.1 ولقد نجح بهذا الشكل ولن تحتاج إلى استدعاء jQuery .

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>    
 </body

لقد لاحظت لديك أن تستدعي ملفات الجافا سكربت في أعلى الصفحة ، الصحيح أن يتم استدعها في أسفل الصفحة وذلك سوف يجعل تحميل الموقع أسرع

القائمة المنسدلة لا تعمل - Bootstrap

السؤال

محمد خالد39

3 أجوبة على هذا السؤال

Recommended Posts

أسامة زيادة

محمد خالد39

أسامة زيادة

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية