[英]Show/Hide Divs in jQuery
I have this JSFiddle for reference: http://jsfiddle.net/422MP/38/ 我有这个JSFiddle供参考: http : //jsfiddle.net/422MP/38/
The green boxes are floating right, therefore I only want them to show when its parent div is expanded. 绿色框是向右浮动的,因此我只希望它们在展开其父div时显示。 If another div is clicked, I want the previous div's green box to hide and the new div's to show.
如果单击另一个div,我希望隐藏前一个div的绿色框并显示新的div。 Any ideas on this?
有什么想法吗? Here is the js:
这是js:
$('.sidebar').on('click', function() {
$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50)
$(this).animate({width: 150}, 400);
else
$(this).animate({width: 50}, 400);
});
Try to position it using absolute position 尝试使用绝对位置定位它
.inner {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
left: 100px;
}
.sidebar {
height: 300px;
width: 50px;
display: inline-block;
position: relative;
overflow: hidden;
/* left: 565px;*/
/*position: relative;i*/
margin:0 0px 0 10px;
}
Please try this 请试试这个
$('.inner').hide();
$('.sidebar').on('click', function() {
$('.inner').hide();
$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50){
$(this).animate({width: 150}, 400);
$(this).find('.inner').show();
}
else{
$(this).animate({width: 50}, 400);
}
});
Why not add display: none
for the inner class definition and then do something like this with the jQuery: 为什么不为内部类定义添加
display: none
,然后使用jQuery执行类似的操作:
$('.sidebar').on('click', function() {
//$('.sidebar').animate({width: 50}, 400);
if ($(this).width() == 50)
$(this).animate({width: 150}, 400).children(".inner").show();
else
$(this).animate({width: 50}, 400).children(".inner").hide();
});
css: CSS:
.inner{display:none;}
javascript: JavaScript的:
$('.sidebar').on('click', function() {
$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50){
$(this).animate({width: 150}, 400);
$(".inner").fadeOut();
$(this).children(".inner").fadeIn();
}
else{
$(this).animate({width: 50}, 400);
$(".inner").hide();
}
});
First hide all the inner divs and show the child inner of current sidebar 首先隐藏所有内部div并显示当前侧边栏的子内部
Add twol lines of code with your js 用你的js添加两行代码
$('.sidebar').on('click', function() {
$(".inner").hide(); $( “内部”)隐藏()。 $(this).children('.inner').show();
$(本)。儿童( '内。')显示()。
$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50)
$(this).animate({width: 150}, 400);
else
$(this).animate({width: 50}, 400);
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.