Jquery 和 CSS pin-unpin 问题用于侧边栏
Jquery and CSS pin-unpin Issue for sidebar
我创建了一个侧面板。这允许我固定和取消固定打开侧边栏。当我们将鼠标悬停在其上时,侧边栏会打开。并使用单击固定图像将其固定。现在我尝试打开侧边栏单击并想要删除悬停。我该如何执行此操作。我还想添加一个功能,即当我单击打开侧边栏的框时,默认情况下它是固定的。所以我不需要固定它。所以打开侧边栏后,每当我点击侧边栏时都不会关闭。对于关闭侧边栏,我必须单击我们用于打开的框。
这是我的代码
.HTML
<ul id="dock">
<li id="files">
<ul class="free">
<li class="header"><a href="javascript:void(0);" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock" style = "padding-top: 12px;"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="" style = "padding-top: 12px;"></a><H5 ID="colorgreen">DISCOVER </h4></li>
<div id="accordion">
<h3>Section 1</h3>
<div class = "accordionheight">
<p>
accordion 1 content
</p>
</div>
<h3>Section 2</h3>
<div class = "accordionheight">
<p>
accordion 2 content
</p>
</div>
<h3>Section 3</h3>
<div class = "accordionheight">
<p>
accordion 3 content
</p>
</div>
</div>
</ul>
</li>
<li id="tools">
<ul class="free">
<li class="header"><a href="#" class="dock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/snipicons/500/pin-128.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Dock"></a><a href="#" class="undock"><IMG SRC="https://cdn2.iconfinder.com/data/icons/oxygen/48x48/actions/note2.png" WIDTH="16" HEIGHT="16" BORDER="0" ALT="Undock"></a><H5 ID="colorgreen">FACT FILE</H5></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
<li><a href="#">This is one item</a></li>
</ul>
</li>
</ul>
.JS
$(document).ready(function(){
var docked = 0;
$("#dock li ul").height($(window).height());
$("#dock .dock").click(function(){
$(this).parent().parent().addClass("docked").removeClass("free");
docked += 1;
var dockH = ($(window).height()) / docked
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".undock").show();
$(this).hide();
if (docked > 0)
$("#content").css("margin-left","250px");
else
$("#content").css("margin-left", "60px");
});
$("#dock .undock").click(function(){
$(this).parent().parent().addClass("free").removeClass("docked")
.animate({right:"-80px"}, 200).height($(window).height()).css("top", "0px");
docked = docked - 1;
var dockH = ($(window).height()) / docked
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
$(this).parent().find(".dock").show();
$(this).hide();
if (docked > 0)
$("#content").css("margin-left", "40px");
else
$("#content").css("margin-left", "80px");
});
$("#dock li").hover(function(){
$(this).find("ul").animate({right:"40px"}, 200);
}, function(){
$(this).find("ul.free").animate({right:"-80px"}, 200);
});
});
.CSS
#dock{margin:0px; padding:0px; list-style:none; position:fixed; top:0px; height:100%;
z-index:9999; background-color:#f0f0f0; right:0px;}
#dock > li {width:40px; height:8.3%; margin: 0 0 1px 0; background-color:#dcdcdc;
background-repeat:no-repeat; background-position:left center;}
#dock #files {background-image:url(../images/menu.png);}
#dock #tools {background-image:url(../images/menu.png);}
/*#dock > li:hover {background-position:-40px 0px;}*/
/* panels */
#dock ul li {padding:5px; border: solid 1px #F1F1F1;}
#dock > li:hover ul {display:block;}
#dock > li ul {position:absolute; top:0px; right: 40px; z-index:-1;width:180px; display:none;
background-color:#F1F1F1; border:solid 1px #969696; padding:0px; margin:0px; list-style:none;}
#dock > li ul.docked { display:block;z-index:-2;}
.dock,.undock{float:left;}
.undock {display:none;}
#sidepanelcontent {margin: 10px 0 0 60px;}
#colorgreen {color:green;}
这里是JsFiddle
你想要这样的东西吗 http://jsfiddle.net/W7sNp/1/
我添加了click
事件并将一些代码从hover
移动到其中。也稍微修改了一下 CSS
在单击框之前,选项卡不会显示
编辑:
我添加了一个快速示例 http://jsfiddle.net/W7sNp/3/它完全忽略悬停
HTML是相同的
.CSS
- :悬停选择器已删除
- 更改
#dock > li ul {position:absolute; top:0px; right: -40px; z-index:-1;width:0px; display:block;
现在它可见,但移出视野并且宽度为 0px
脚本
所有功能都移到$("#dock li").click()
,它决定按宽度打开或关闭选项卡
$(document).ready(function(){
var docked = 0;
$("#dock li ul").height($(window).height());
$("#dock li").click(function(){
var test = $(this).find("ul").css('width');
if (test=="0px"){
$(this).find("ul").addClass("docked").removeClass("free").animate({right:"40px",width:'180px'}, 200);
docked += 1;
}else{
$(this).find("ul").addClass("free").removeClass("docked").animate({right:"-40px",width:'0px'}, 200);
docked = docked - 1;
}
console.log(docked);
var dockH = ($(window).height()) / docked;
var dockT = 0;
$("#dock li ul.docked").each(function(){
$(this).height(dockH).css("top", dockT + "px");
dockT += dockH;
});
if (docked > 0)
$("#content").css("margin-left","250px");
else
$("#content").css("margin-left", "60px");
});
});
相关文章:
- 当侧边栏很长时,滚动/固定侧边栏会被切断
- 创建带有侧边栏的谷歌地图
- 如何在显示侧边栏时禁用背景,单击除侧边栏之外的任何位置都会关闭侧边栏
- 在页脚处停止固定侧边栏-防止重叠
- 如何将javascript添加到Wordpress侧边栏中
- 如何正确地将数据发送到打开的Firefox侧边栏
- 如何制作侧边栏以增加其完整长度
- 固定位置侧边栏不滚动-设置内容的高度
- Firefox插件SDK:在侧边栏和主脚本之间通信对象
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 如何将数组(Google应用程序脚本)返回到HTML侧边栏
- 切换传单侧边栏 V2
- 粘性侧边栏停止在页脚上方 30px
- 使用什么js函数来切换侧边栏
- 指定的侧边栏广播器无效 -- 有效的侧边栏广播器是什么样子的
- 向下滚动页面时在侧边栏中显示部分标题(也许使用 BS scrollspy?
- 火狐侧边栏获取标签网址
- 滚动时固定了侧边栏的计算
- Jquery 和 CSS pin-unpin 问题用于侧边栏
- 使用Rails 4,需要帮助来制作一个更好的侧边栏菜单用于导航