Javascript '；悬停'；下拉至可点击的下拉列表（通过媒体查询）

当光标悬停在该网站上时，该网站的下拉列表通常（大窗口）“打开”。我想让下拉菜单改变这一点，并通过点击打开，但只有在窗口大小足够小之后（当顶部导航栏变为滑动侧栏时）。谢谢所有帮助我的人

编辑：问题几乎已解决，只需再次单击按钮时关闭下拉列表

以下是我所有的代码（HTML、CSS和JavaScript）：

函数openNav（）{ $（'body'）.addClass（'open'）； } 函数closeNav（）{ $（'body'）.removeClass（'open'）； } //新添加（单击时会打开下拉列表） 函数openDrop（）{ $（'body'）.addClass（'show'）； } //新增（单击某个内容时关闭下拉列表（通过onclick=“closeDrop（）在html文件中指定） 函数closeDrop（）{ $（'body'）.removeClass（'show'）； }

html{
最小高度：100%；
高度：自动；
背景：线性梯度（#e6，白色）；
背景尺寸：封面；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
}
身体{
-webkit字体平滑：抗锯齿；
利润率：0%；
字体系列：Arial；
滚动行为：平滑；
高度：自动
}
：-webkit滚动条{
宽度：10px；
}
：-webkit滚动条拇指：悬停{
背景#80bff；
}
：-webkit滚动条轨迹{
背景#f2f2；
}
：-webkit滚动条拇指{
边界半径：25px；
边框样式：实心；
边框颜色：#F2F2；
边框宽度：2倍；
背景:#3399ff；
}
* {
框大小：边框框；
}
.标题{
位置：相对位置；
左：0px；
右：0px；
顶部：0px；
字号：187%；
文本对齐：左对齐；
填充：1.5%；
背景色：白色；
颜色：灰色；
z指数：2；
文本阴影：2px2p5pRGBA（0,0,0,0.2）；
}
#main1{
颜色：#3399ff；
}
.内容{
溢出：隐藏；
}
.行{
显示器：flex；
柔性包装：包装；
填充：0px 10px；
}
.卡片{
弹性：25%；
最大宽度：25%；
填充：0px 4px；
}
.卡p{
浮动：左；
背景色：白色；
盒影：0px 4px 8px 1px rgba（0,0,0,0.2）；
边界半径：5px；
左侧填充：15px；
右侧填充：15px；
填充顶部：15px；
垫底：15px；
过渡：0.3s；
边缘顶部：8px；
垂直对齐：中间对齐；
}
.卡p：悬停{
盒影：0px 8px 16px 1px rgba（0,0,0,0.2）；
}
.卡a{
浮动：左；
颜色：灰色；
文本对齐：居中；
文字装饰：无；
显示：块；
边界半径：5px；
填充：2%；
过渡：0.3s；
}
.卡a：悬停{
盒影：0px 3px 10px rgba（0,0,0,0.1）；
背景色：#fbfb；
颜色：#3399ff；
}
.卡之家{
位置：相对位置；
保证金权利：10%；
左边距：10%；
利润率最高：5%；
利润底部：10%；
}
.card home p{
浮动：左；
背景色：白色；
盒影：0px 4px 8px 1px rgba（0,0,0,0.2）；
边界半径：5px；
填充：30px；
字体大小：120%；
过渡：0.3s；
边缘顶部：8px；
垂直对齐：中间对齐；
}
.card home p：悬停{
盒影：0px 8px 16px 1px rgba（0,0,0,0.2）；
}
.卡家a{
浮动：左；
颜色：灰色；
文本对齐：居中；
文字装饰：无；
显示：块；
边界半径：5px；
填充：1%；
过渡：0.3s；
}
.card home a:悬停{
盒影：0px 3px 10px rgba（0,0,0,0.1）；
背景色：#fbfb；
颜色：#3399ff；
}
.导航{
z指数：1；
宽度：100%；
列表样式类型：无；
背景色：白色；
盒影：0px 3px 25px rgba（0,0,0,0.2）；
职位：-网络工具包粘性；
位置：粘性；
顶部：0px；
填充顶部：0px；
高度：自动；
}
#边栏{
宽度：100%；
}
李{
浮动：左；
}
李安，.dropbtn{
背景色：白色；
显示：块；
文本对齐：居中；
宽度：100%；
高度：自动；
填充：15px；
字体大小：100%；
颜色：灰色；
文字装饰：无；
光标：指针；
过渡：0.5s；
}
li a:悬停：未（.active），.dropdown:悬停.dropbtn{
背景色：#F2F2；
}
@介质（屏幕和最大宽度：1500px）{
.卡片{
弹性：50%；
最大宽度：50%；
}
}
@介质（最大宽度：800px）{
李{
浮动：无；
}
.卡片{
边缘顶部：4.2米；
弹性：100%；
最大宽度：100%；
}
.卡之家{
边缘顶端：5em；
左边距：20px；
右边距：20px；
}
.导航{
z指数：2；
身高：100%；
宽度：0；
位置：固定；
背景色：#e6；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
李{
背景：#e6；
}
李安，.dropbtn{
背景色：#e6；
浮动：左；
文本对齐：左对齐；
填充：10px；
宽度：100%；
文字装饰：无；
字体大小：25px；
显示：内联块；
z指数：1；
}
.关闭{
宽度：自动；
浮动：对；
填充：6px 16px 6px 16px；
位置：绝对位置；
文本对齐：居中；
顶部：5px；
右：5px；
字体大小：36px；
左边距：50像素；
}
.大约一周{
浮动：左；
}
.closebtn:悬停{
边界半径：50%；
}
#main1{
过渡：左边距0.5s；
}
#缅因州2{
过渡：左边距0.5s；
}
.标题{
位置：固定；
盒影：0px 3px 25px rgba（0,0,0,0.2）；
}
.收割台跨度{
填充物：5px；
}
#边栏{
宽度：0px；
}
.打开#侧边栏{
宽度：250px；
}
.打开#main 1{
左边距：250像素；
}
.打开#main 2{
左边距：250像素；
}
/*.下拉：悬停.下拉内容{
显示：块；
位置：相对位置；
背景色：#e6；
}*/
}
@介质（最小宽度：800px）{
.关闭{
显示：非
var dropdownContent = document.getElementsByClassName("dropdown-content")

dropdownContent.style.display

var dropdownContent = document.getElementsByClassName("dropdown-content")[0];

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
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');
      }
    }
  }
}

function openDrop() {
    $('body').addClass('show');
}

$('html').click(function(e) {   
    if( !$(e.target).hasClass('dropbtn') ) {
    $('body').removeClass('show');
}
});