gpt4 book ai didi

javascript - jQuery Mobile 悬停侧面板

转载 作者:行者123 更新时间:2023-11-28 20:18:27 26 4
gpt4 key购买 nike

我正在尝试使用桌面版 jQuery Mobile。我正在构建一个社交网络服务,我想为每个组和消息使用使用左右面板。

我想要的是当我将鼠标悬停在相应的标题栏按钮上时显示侧面板,就像 Google+ 中的侧边栏一样。

这是我的代码:

jsFiddle

<!DOCTYPE html> 
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!--jqm cdn-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<div data-role="page">
<!--groups panel-->
<div data-role="panel" id="groups-panel" data-position="left" data-display="overlay">
LPS
</div>
<!--friends panel-->
<div data-role="panel" id="friends-panel" data-position="right" data-display="overlay">
LPS
</div>

<div data-role="header" data-theme="b">
<a href="#groups-panel" id="groups-button" data-icon="arrow-r" data-iconpos="notext">Groups</a>
<h1>My Title</h1>
<a href="#friends-panel" id="friends-button" data-icon="arrow-l" data-iconpos="notext">Friends</a>
</div><!-- /header -->

<div data-role="content">

</div><!-- /content -->

</div><!-- /page -->

</body>
</html>

我怎样才能做到这一点?如有任何帮助,我们将不胜感激。

最佳答案

将此代码添加到您的页面

$('#groups-panel').mouseleave(function () {
$(this).panel("close");
});

$("#groups-button").hover(function () {
$('#groups-panel').panel("open");
});

$('#friends-panel').mouseleave(function () {
$(this).panel("close");
});

$("#friends-button").hover(function () {
$('#groups-panel').panel("open");
});

Fiddle

关于javascript - jQuery Mobile 悬停侧面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18810470/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com