多個顯示隱藏切換，div滑出
[英]multiple show hide toggle with div sliding out
問題描述
我是編碼新手，需要jQuery幫助。 我有2個<div> （一個帶有圖像，另一個帶有菜單列表，寬度均為50％），並且我需要能夠單擊其中一個菜單選項以使新的div（寬度為50％）從右側，同時將其他2個div寬度分別減小到25％。 然后單擊同一菜單選項以隱藏新的div並恢復為原始寬度。 但是，如果在新的div可見時單擊另一個菜單選項，則需要它將內容更改為該特定的菜單選項內容。
如何用jQuery換掉左側的<div> ？
這是我正在使用的HTML：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- SCRIPT FILES -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
<!-- CSS STYLESHEETS -->
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!--header-->
<div id="container">
<div class="box-container">
<div class="box1">
<img src="images/Untitled-1.png" alt="logo">
</div>
<div class="box2">
<div id="nav">
<ul>
<li><a>hello!</a></li>
<li><a>ADVERTISING</a></li>
<li><a>DESIGN</a></li>
<li><a>ABOUT</a></li>
<li><a>BLOG</a></li>
<li><a>SHOP</a></li>
</ul>
</div><!--nav-->
</div><!--box2-->
<div class="box3">
<div id="ADVERTISING" class="content">ADVERTISING</div>
<div id="DESIGN" class="content">DESIGN</div>
<div id="ABOUT" class="content">ABOUT</div>
<div id="BLOG" class="content">BLOG</div>
<div id="SHOP" class="content">SHOP</div>
</div>
</div><!--box-container-->
</div><!--container-->
<div id="footer">
</div><!--footer-->
</div><!-- wrapper-->
</body>
</html>
這是具有樣式的工作jsFiddle： http : //jsfiddle.net/YcphY/6/
2 個解決方案
解決方案1
1 2012-12-21 20:54:45
對於初學者來說， 這是一種將以下示例操作方法與所需動畫聯系在一起的方法 ：
$(function() {
$("#nav").delegate("li","click", function() {
var newDiv = $(".box3 .content").eq($(this).index()-1);
newDiv.siblings().hide().end(); // hide the others
if(newDiv.is(":visible")) {
// if shown, fade it out, when the fade finishes, slide everything back
newDiv.fadeOut(function() {
$(".box3").hide();
$(".box1, .box2").animate({ width: "50%" });
});
} else {
// if not shown, then slide over space, then fade in
$(".box1, .box2").animate({ width: "25%" }, function() {
$(".box3").show();
newDiv.fadeIn("fast");
});
}
});
});
給定您當前的CSS，您可以執行以下操作：
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + $(this).text()).show().siblings().hide();
});
});
這是一個有效的示例 ，盡管您可以看到CSS需要一些工作才能使其100％運行。 不過，我建議您進行一些更改：給您的鏈接和容器匹配ID，如下所示：
<li><a id="ad">ADVERTISING</a></li>
<div id="ad-container" class="content">ADVERTISING</div>
然后，JS可以是：
$(function() {
$("#nav").delegate("li a","click", function() {
$(".box3").show();
$("#" + this.id + "-container").show().siblings().hide();
});
});
這是一個可行的示例 ...它使您可以隨意更改文本，而不必擔心稍后JS崩潰。 另一個替代方法是，如果鏈接數在所有情況下都與<div>一致，則使用<li> .index()列表中鏈接的索引，即使存在偏移量，原因是“你好！” 鏈接。
$(function() {
$("#nav").delegate("li","click", function() {
$(".box3").show();
$(".box3 .content").hide().eq($(this).index()-1).show();
});
});
解決方案2
1 2012-12-21 21:15:32
我認為jQuery的動畫功能可能對您有用。
您需要做的是將隱藏的div放置在窗口之外，並添加到HTML中（或者，如果願意，可以使用document.ready事件上的jquery動態添加它），並使用上述動畫函數進行滑動它進出，並將其綁定到菜單項的單擊功能。
樣例代碼
$(document).ready(function(){
$('#slide').click(function(){
var hidden = $('.hidden');
if (hidden.hasClass('visible')){
hidden.animate({"left":"-1000px"}, "slow");
hidden.removeClass('visible');
} else {
hidden.animate({"left":"0px"}, "slow");
hidden.addClass('visible');
}
});
});
說明
在上面的代碼中，我們將代碼綁定到id “ slide”的元素的click事件。 單擊該元素后，便會啟動代碼。 我們檢查.hidden是否具有名為“ visible”的css類。 如果沒有，我們將為隱藏的div設置動畫以使其滑入。如果它具有可見的類，則將其滑出。
工作小提琴
這是為您工作的JSFiddle
一些指針
- 在隱藏的div的CSS中，請記住指定一個大於當前左側面板的z-index。
- 在隱藏的div的CSS中，請記住將
position設置為absoluteposition，並left在-1200px左右（或大於window.width（），以使其適用於所有屏幕尺寸）。
使用按鈕切換顯示/隱藏div以獲取多個結果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.