原生JavaScript技术，jQuery实现下拉菜单

以下是使用原生JavaScript和jQuery实现下拉菜单的简单示例：

原生JavaScript实现下拉菜单：

HTML:

<div class="dropdown">
  <button class="dropbtn">点击我</button>
  <div class="dropdown-content">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
    <a href="#">链接3</a>
  </div>
</div>

CSS:

/* 隐藏下拉内容 */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
/* 下拉按钮样式 */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

JavaScript:

// 获取元素
var dropbtn = document.querySelector('.dropbtn');
var dropdownContent = document.querySelector('.dropdown-content');
 
// 添加点击事件监听器
dropbtn.addEventListener('click', function() {
  // 切换下拉内容的显示与隐藏
  dropdownContent.classList.toggle('show');
});
 
// 点击其他位置时隐藏下拉内容
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};

jQuery实现下拉菜单：

HTML和CSS同上。

JavaScript (使用jQuery):

// 点击按钮切换下拉内容的显示
$('.dropbtn').click(function() {
  $('.dropdown-content').toggle();
});
 
// 点击其他位置隐藏下拉内容
$(window).click(function(event) {
  if (!$(event.target).closest('.dropbtn').length) {
    $('.dropdown-content').hide();
  }
});

在这两个示例中，我们定义了一个简单的下拉菜单，当用户点击按钮时显示下拉内容，点击其他位置时隐藏下拉内容。原生JavaScript示例使用了classList和addEventListener，而jQuery示例使用了toggle和closest方法简化了事件监听和元素操作。