python web py入门（66）- jQuery - 隐藏显示实现界面大小可变布局
程序员文章站
2022-07-07 11:52:12
...
在前面学习鼠标位置来显示不同的页面，现在来学习怎么样实现页面内容动态地改变。比如有一些不常用的功能，如果一直放在页面上，显得很占用位置，让用户一眼看上去，找不到聚焦点，这样用户感觉乱乱的，太复杂的感觉。为了保持界面清晰，简单，其实大家都喜欢简单，这样办事情效率才高。因此，设计页面交互时，常常在同一个页面会针对不同的用户，进行不同的内容显示，这样也叫个性设计，也可以叫人功智能自适应。怎么样实现隐藏呢？下面带着这个问题来学习。要实现隐藏，首先要学习HTML的隐藏的用法，如下面例子：
在上一个例子里添加了下面的代码：
// 隐藏按钮，缩小显示位置
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// 模拟一次点击，让它在收缩状态
$('#switcher').click();
这一段代码，先定义了一个函数toggleSwitcher，它实现针对按钮进行隐藏。
$(event.target).is('button')
这一句用来判断是否是按钮类型的事件点击，如果是的话，就不要进行隐藏功能响应，在前面加了一个非运算符，就变成了非按钮点击都进行响应。
$('#switcher button').toggleClass('hidden')
这一行代码使用ID选择器，然后再根据类button选择器来找到三个按钮，然后在三个按钮里添加hidden="hidden"，也就实现了隐藏的功能。不过toggleClass（）函数有点像一个触发器，点击一下展开，点击一下隐藏。
TensorFlow入门基本教程
<!DOCTYPE html>
<html>
<body>
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>文章显示系统</title>
<link rel="stylesheet" href="page/page.css" type="text/css" />
<script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
//鼠标位置在切换窗口上显示不同的颜色
$('#switcher').hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);
// 隐藏按钮，缩小显示位置
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// 模拟一次点击，让它在收缩状态
$('#switcher').click();
});
</script>
</head>
<body>
<div id="container">
<div id="switcher" class="switcher">
<h3>页面布局选择</h3>
<button id="switcher-default">
默认
</button>
<button id="switcher-narrow">
一般显示
</button>
<button id="switcher-large">
大号显示
</button>
</div>
</div>
<span></span>
</body>
</html>
在上一个例子里添加了下面的代码：
// 隐藏按钮，缩小显示位置
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// 模拟一次点击，让它在收缩状态
$('#switcher').click();
这一段代码，先定义了一个函数toggleSwitcher，它实现针对按钮进行隐藏。
$(event.target).is('button')
这一句用来判断是否是按钮类型的事件点击，如果是的话，就不要进行隐藏功能响应，在前面加了一个非运算符，就变成了非按钮点击都进行响应。
$('#switcher button').toggleClass('hidden')
这一行代码使用ID选择器，然后再根据类button选择器来找到三个按钮，然后在三个按钮里添加hidden="hidden"，也就实现了隐藏的功能。不过toggleClass（）函数有点像一个触发器，点击一下展开，点击一下隐藏。
运行的效果如下：