عدة طرق لتحقيق القائمة المنسدلة الثانوية في قائمة التوجيهات باستخدام JavaScript

لقد قمت مؤخرًا بجمع ثلاث طرق لتحقيق القوائم الفرعية في قائمة التصفح باستخدام JavaScript، مما يسهل تطبيقها في المشاريع.

　كيف يمكن تحقيق القوائم الفرعية في شريط التصفح؟

　　يمكننا رؤية بعض القوائم الفرعية التي تستخدمها بعض المواقع الكبيرة مثل Taobao و Sohu في الصور أدناه.

لكن كيف يمكن تحقيق صور مشابهة؟ في الواقع، لدينا على الأقل ثلاث طرق لتحقيق ذلك، وفيما يلي، سأقدم لك رموز البرمجة لأخذ الأمثلة.

1.استخدام html و css فقط

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
/*المفتاح الأول: تعيين القائمة الفرعية على display:none;*/
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
/*المفتاح الثاني: عند مرور الماوس فوق القائمة الفرعية من القائمة الرئيسية، يتم تعيين display:block;*/
ul li:hover ul{display: block;}
</style>
<div id="nav">
  <ul>
    <li><a href="">الصفحة الرئيسية</a></li>
    <li><a href="">汽车</a>
      <ul>
        <li><a href="#">أودي</a></li>
        <li><a href="#">دوج</a></li>
      </ul>
    </li>
    <li><a href="">تلفن</a>
      <ul>
        <li><a href="#">شاومي</a></li>
        <li><a href="#">هواوي</a></li>
      </ul>
    </li>
    <li><a href="">اتصل بنا</a></li>
  </ul>
</div> 

　　می‌توانید ببینید که این روش بهتر است، زیرا آن را از هم جدا می‌کند ساختار و نمایش.

2. با استفاده از JavaScript

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display:none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
  <ul>
    <li><a href="#">خانه</a></li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">اتومبیل</a>
  <!-- کلید اول: برنامه زمانی در برچسب‌های عنوان اولیه فرعی‌های دومین سطح تنظیم می‌شود، این li علامت به این li علامت اشاره دارد -->
      <ul>
        <li><a href="#">أودي</a></li>
        <li><a href="#">دوج</a></li>
      </ul>
    </li>
    <li onmouseover="show(this)" onmouseout="hide(this)"><a href="#">تلفن</a>
      <ul>
        <li><a href="#">شاومي</a></li>
        <li><a href="#">هواوي</a></li>
      </ul>
    </li>
    <li><a href="#">تماس بگیرید</a></li>
  </ul>
</div> 

ایجاد این با استفاده از JavaScript دشوار است و در اینجا ساختار و رفتار از هم جدا نشده‌اند (اگرچه می‌توان از DOM در JavaScript برای جدا کردن ساختار و رفتار استفاده کرد، اما بسیار پیچیده است)، توصیه نمی‌شود.

3. با استفاده از jQuery

　　jQuery یک کتابخانه JavaScript است، می‌توانیم نسخه‌های جدیدترین این کتابخانه را از وب‌سایت jQuery دانلود کنیم، فایل‌های فشرده شده برای محصولات استفاده می‌شوند، فایل‌های فشرده شده برای راحتی توسعه‌دهندگان برای یادگیری و رفع اشکال استفاده می‌شوند. پس از دانلود به رایانه، باید این کتابخانه را در HTML به کار گیریم، چرا که jQuery به طور ماهیتاً JavaScript است، بنابراین روش استفاده به صورت زیر است:

　　　　<script src="path_name"></script>　　

باستخدام jQuery، رمز ایجاد منوهای فهرست فرعی به شرح زیر است：

<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding: 0;list-style: none;text-decoration: none;}
#nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;}
ul{background: #aaa}
ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;}
ul li:hover{background: #cea;}
ul li ul li{float: none;}
ul li ul{position: absolute;top:40px;left: 0; display: none;}
ul li ul li:hover{background: red;}
</style>
<div id="nav">
  <ul>
    <li><a href="">الصفحة الرئيسية</a></li>
    <li class="navmenu"><a href="">سيارة</a>
      <ul>
        <li><a href="#">أودي</a></li>
        <li><a href="#">دوج</a></li>
      </ul>
    </li>
    <li class="navmenu"><a href="">هاتف</a>
      <ul>
        <li><a href="#">شاومي</a></li>
        <li><a href="#">هواوي</a></li>
      </ul>
    </li>
    <li><a href="">اتصل بنا</a></li>
  </ul>
</div> 

　<!-- المفتاح الأول: تضمين ملف مكتبة jQuery -->

　من الواضح أن استخدام jQuery سهل جدًا.

　

النتيجة النهائية للتنفيذ كالتالي؛

عندما يمر الماوس فوق القائمة الرئيسية، يظهر القائمة الفرعية الم correspondng.

　شكرًا على القراءة، آمل أن تكون مفيدًا للجميع، شكرًا لدعمكم لموقعنا!