Jquery 隐藏/显示按钮上的Div单击不工作。我知道的都试过了

我是编程新手，我在不断学习。到目前为止，我已经能够解决所有的问题，但我似乎无法破解当按下按钮时使Div滑入和滑出页面的代码。我已经尝试了所有我能找到的解决方案，包括，但仍然无法解决这个问题

请参阅下面我的代码：

（函数（$）{
$（“.a”）。单击（函数（）{
$（“.architecture”）.show（‘幻灯片’{
方向：“对”
}, 800);
});
})（jQuery）；
（函数（$）{
$（'.closea'）。单击（函数（）{
$（'.architecture'）。隐藏（'slide'{
方向：“对”
}, 800);
});
})（jQuery）
.architecture{
可见性：隐藏；
背景色：白色；
位置：固定；
底部：0；
排名：0；
右：0；
宽度：44%；
盒影：0 8px 12px 0 rgba（0,0,0,0.2），0 10px 20px 0 rgba（0,0,0,0.25）；
}
体系结构
您在这里犯了很多错误：


可见性：隐藏不受显示和隐藏的影响，因此div将保持隐藏状态。你应该移除它。编辑以下注释：
display
受隐藏和显示（如果需要）的影响

按钮和选择器的类是错误的，顺便说一句，不要给同一个按钮提供隐藏和显示，因为它们将同时触发（不完全是，我让你试试这个）
为测试添加了具有良好类“架构”的div


（函数（$）{
$（“.a”）。单击（函数（）{
$（“.architecture”）.show（‘幻灯片’{
方向：“对”
}, 800);
});
})（jQuery）；
（函数（$）{
$（'.b'）。单击（函数（）{
$（'.architecture'）。隐藏（'slide'{
方向：“对”
}, 800);
});
})（jQuery）
.architecture{
/*可见性：隐藏*/
显示：无；
背景色：白色；
位置：固定；
底部：0；
排名：0；
右：0；
宽度：44%；
盒影：0 8px 12px 0 rgba（0,0,0,0.2），0 10px 20px 0 rgba（0,0,0,0.25）；
}

显示
隐藏
您在这里犯了很多错误：


可见性：隐藏不受显示和隐藏的影响，因此div将保持隐藏状态。你应该移除它。编辑以下注释：
display
受隐藏和显示（如果需要）的影响

按钮和选择器的类是错误的，顺便说一句，不要给同一个按钮提供隐藏和显示，因为它们将同时触发（不完全是，我让你试试这个）
为测试添加了具有良好类“架构”的div


（函数（$）{
$（“.a”）。单击（函数（）{
$（“.architecture”）.show（‘幻灯片’{
方向：“对”
}, 800);
});
})（jQuery）；
（函数（$）{
$（'.b'）。单击（函数（）{
$（'.architecture'）。隐藏（'slide'{
方向：“对”
}, 800);
});
})（jQuery）
.architecture{
/*可见性：隐藏*/
显示：无；
背景色：白色；
位置：固定；
底部：0；
排名：0；
右：0；
宽度：44%；
盒影：0 8px 12px 0 rgba（0,0,0,0.2），0 10px 20px 0 rgba（0,0,0,0.25）；
}

显示
隐藏
我希望这会对您有所帮助：）


函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

☰ 打开
我希望这会对您有所帮助：）


函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
正文{
字体系列：“Lato”，无衬线；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
.侧导航a:悬停{
颜色：#f1f1；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}

☰ 打开
“将jQuery放入html是一个坏习惯”：更一般地说，混合标记、表示和逻辑是一个坏习惯
。架构
元素在哪里？还要注意，您在按钮元素上提供了两个
class
属性，其中第二个属性将被忽略。请使用问题的
edit
按钮。注释中的代码几乎无法理解，感谢您的快速响应“将jQuery放入html是一个坏习惯”：更一般地说，混合标记、表示和逻辑是一种坏习惯。架构元素在哪里？还要注意，您在按钮元素上提供了两个
class
属性，其中第二个属性将被忽略。请使用问题的
edit
按钮。注释中的代码几乎无法阅读，感谢您的快速回复