提取网站特定HTML部分的JavaScript代码-js教程-PHP中文网

提取网站特定HTML部分的JavaScript代码

心靈之曲

发布： 2025-07-15 18:32:14

原创

271人浏览过

提取网站特定html部分的javascript代码

本文旨在提供一种更简洁高效的移动端菜单实现方法，避免引入大量冗余代码导致潜在的冲突问题。通过结合CSS和少量JavaScript，实现移动端Toggle菜单的切换效果，并提供示例代码，帮助开发者快速构建响应式导航菜单。

在Web开发中，经常会遇到需要为移动端设计Toggle菜单的情况。如果仅仅为了一个简单的菜单功能而引入大量的JavaScript代码，可能会导致代码冗余，增加页面加载时间，甚至与其他JavaScript代码产生冲突。因此，一种更优雅的解决方案是利用CSS和少量JavaScript来实现Toggle菜单的切换效果。

核心思想

核心思想是使用CSS控制菜单在不同屏幕尺寸下的显示与隐藏，并使用JavaScript来切换CSS类名，从而实现菜单的展开与折叠。

HTML结构

首先，我们需要一个基本的HTML结构来构建菜单：

立即学习“Java免费学习笔记（深入）”；

<nav>
  <a href="#" class="logo"><img src="https://picsum.photos/seed/picsum/60" alt=""></a>
  <ul class="menu">
    <li><a href="#">Link 1</a></li>
    <li>
      <a href="#" class="drop">Menu 1</a>
      <ul class="list">
        <li><a href="#">Sub Link 1</a></li>
        <li><a href="#">Sub Link 2</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="drop">Menu 2</a>
      <div class="menu">
        <ul class="list">
          <li><h5>Sub Header 1</h5></li>
          <li><a href="#">Sub Link 3</a></li>
          <li><a href="#">Sub Link 4</a></li>
        </ul>  
        <ul class="list">
          <li><h5>Sub Header 2</h5></li>
          <li><a href="#">Sub Link 3</a></li>
          <li><a href="#">Sub Link 4</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Link 2</a></li>
  </ul>
  <div class="links">F T G I S  </div>
  <a href="#" class="toggle">&#x2630;</a>
</nav>

登录后复制

这个结构包含一个导航栏，包含Logo、主菜单、链接以及Toggle按钮。其中，.menu 类用于包含菜单项，.toggle 类用于控制菜单的显示与隐藏。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

查看详情

CSS样式

接下来，我们需要使用CSS来控制菜单的显示与隐藏：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255,255,255,.8);
}
h5 {padding: 8px;}
nav > .menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  width: 100%;
  max-height: 400px;
  background-color: rgba(255,255,255,.8)
}
ul {
  list-style: none;
  padding-left: 12px;
}
.toggle {display: block}
a {text-decoration: none;}
li a:hover {
  background-color: rgba(0,0,0,.1);
}
.links {white-space: nowrap;}
a {
  display: block;
  position: relative;
  padding: 8px 12px;
}
a.drop {
  padding-right: 24px;
}
a.drop:after {
  content: '';
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-75%) rotate(45deg);
  width: 5px; height: 5px;
  border: 2px solid #444;
  border-color: transparent #444 #444 transparent;
}
.menu .menu, ul.menu .list {
  display: none;
}
.menu .menu.active, ul.menu .list.active, .menu.active > .list {
  display: block;
}

@media screen and (min-width: 768px) {
  .toggle {display: none}
  nav > .menu {
    width: 90%;
    display: flex;
    position: relative;
    justify-content: center;
  }
  nav > ul > li > a {
    padding: 32px!important;
  }
  li:hover > .list, li:hover > .menu {
    border-top: 2px solid #333;
    display: block;
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    z-index: 1;
  }
  li:hover .menu > .list {
    display: inline-block;
  }
  li:hover .menu a {
    max-width: 120px;
  }
}

登录后复制

这段CSS代码首先隐藏了.menu，只显示.toggle按钮。在屏幕尺寸大于768px时，隐藏.toggle按钮，并显示.menu。

JavaScript交互

最后，我们需要使用JavaScript来切换.menu的显示与隐藏：

$('a.drop').click(function(e) {
  e.preventDefault();
  $(this).next().toggleClass('active');
});

$('.toggle').click(function(e) {
  e.preventDefault();
  $('nav > .menu').toggle();
  $(this).html(($(this).html() == 'x' ? '&#x2630;' : 'x'));
});

登录后复制

这段JavaScript代码监听.toggle按钮的点击事件，点击时切换.menu的display属性，同时切换toggle按钮的显示内容。