Javascript 使用jQuery隐藏/显示元素

我正在尝试学习jQuery和Javascript。我想使用我在页面上放置的按钮在网页上隐藏和显示带有按钮的Div元素（div2）。但是，我希望jQuery代码放在后面引用的单独文件中（如自定义.css文件）。这是我的基本代码：

#第1部分{
背景颜色：海蓝宝石；
}
#第二组{
背景颜色：耐火砖；
}
#隐藏秀{
背景颜色：矢车菊蓝；
}

这是一个容器
这是另一个部门。
点击我！

---

方法或可能有帮助。

您好，您的html文件应该首先引用Jquery，然后在JS文件中执行以下操作：

$('#hide_show').on('click', function(event){
  $('#div2').hide();
});

---

html语法无效。你需要先解决这个问题。使用网站 然后使用您可以编写jquery

$('#hide_show').click(function(){
  $('#div2').toggle();
});

---

对于这样的问题，我建议您访问该网站

它将告诉您如何正确地包含JQuery库，并且是编程语法的一个很好的参考站点

例如，在上，它说：

如果您不想自己下载和托管jQuery，可以从CDN（内容交付网络）中包含它

谷歌和微软都托管jQuery

要使用Google或Microsoft提供的jQuery，请使用以下选项之一：

谷歌：

微软：

---

此外，还将告诉您如何使用

toggle

方法，该方法实际上有很多一些人通常不知道的花絮在这种情况下使用的好方法是

.toggle（）

。如果元素是隐藏的，则基本上应用

.show（）

；如果元素是显示的，则应用

.hide（）

例如：

$（文档）。在（'click'，'button'，e=>{
$（$（e.target）.data（'target'））.toggle（）；
});

切换#div1
切换#div2
这是一个容器。
这是另一个部门。
在按钮上隐藏显示元素，然后单击

在这个例子中，我使用一个函数来隐藏单击时显示的元素，所以我可以多次使用这个函数。通过在任何按钮单击函数上传递参数


let CustomeToggle=（divId，readMoreText）=>{
toggle（）；
开关（$（readMoreText.text（））{
案例“阅读更多”：
$（readMoreText）.text（'Less'）
打破
“少”一案：
$（readMoreText）.text（'readmore'）
打破
“查看更多”案例：
$（readMoreText）.text（'less view'）
打破
案例“较少视图”：
$（readMoreText）.text（'查看更多'）
打破
违约：
$（readMoreText）.text（'readmore'）
}
}
$（“#alphaReadmore”）。单击（函数（）{
自定义切换（$（'.FirstDiv'），此）
})
$（'#count_viewmore'）。单击（函数（）{
自定义切换（$（'.secondDiv'），此）
})
a{
颜色：蓝色；
显示：块；
边缘顶部：15px；
光标：指针
}

A B C D E F G H


阅读更多




12345678910


查看更多
头
标记应在
正文
标记之外HTML语法无效。你需要先解决这个问题。使用网站。然后您可以使用id作为选择器来隐藏和显示$噢，我没看到。谢谢你的提醒。不，代码块不会影响你的文件。非常感谢！让事情变得容易多了！非常感谢。工作起来很有魅力！添加的过渡效果非常好@哈姆萨：你可能应该在答案分数下面打勾表示接受，以此来表扬他。
$('#hide_show').click(function(){
  $('#div2').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>