CSS/Jquery用于在父元素后面显示子元素
CSS/Jquery用于在父元素后面显示子元素
提问于 2015-02-12 19:54:15
我正在尝试创建基于当前HTML结构的选项卡导航。基本上，我希望能够把书名显示为选项卡，并在标签下面显示详细信息。如下所示：
或者这个：http://jsfiddle.net/syahrasi/Us8uc/
修改HTML 不是选项。我正在寻找一种纯CSS解决方案，或者--如果不可能--将CSS与jquery结合起来
在我当前的实现中(参见下面)，当您单击“图书标题”选项卡时，下一个选项卡将被推到右边。我正在寻找一种解决方案，它可以在选项卡下面显示图书内容--而不是将下一个选项卡推到右边。
我现在拥有的：
$(document).ready(function() {
$('.book-content').hide();
});
$('.btn').click(function(e) {
$('.book-content').hide();
$(this).closest('.book').find('.book-content').slideToggle('fast');
e.preventDefault();
});body{
background-color: grey;
}
.books{
background-color: white;
}
.book{
display: inline-block;
vertical-align: top;
background-color: lightblue;
}
.hide{
display: none;
}
.active{
background-color:#F7778F;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="stackoverflow.css">
</head>
<body>
<div class="books"> BOOKS <br/>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 1</a></div>
<div class="book-content">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
<div class="book active">
<div class="book-title"><a href="" class="btn">Book 2</a></div>
<div class="book-content">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 3</a></div>
<div class="book-content hide">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="stackoverflow.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2015-02-12 19:58:51
$(document).ready(function() {
$('.book-content').hide();
});
$('.btn').click(function(e) {
if(!$(this).closest('.book').find('.book-content:visible').length)
{
$('.book-content').slideUp('fast');
$(this).closest('.book').find('.book-content').slideDown('fast');
}
e.preventDefault();
});body{
background-color: grey;
}
.books{
background-color: white;
}
.book{
display: inline-block;
vertical-align: top;
background-color: lightblue;
}
.hide{
display: none;
}
.active{
background-color:#F7778F;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="stackoverflow.css">
</head>
<body>
<div class="books"> BOOKS <br/>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 1</a></div>
<div class="book-content">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
<div class="book active">
<div class="book-title"><a href="" class="btn">Book 2</a></div>
<div class="book-content">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
<div class="book">
<div class="book-title"><a href="" class="btn">Book 3</a></div>
<div class="book-content hide">
<div class="book-description">Description Lorem ipsum dolor sit amet.</div>
<div class="book-author">Author Lorem ipsum</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="stackoverflow.js"></script>
</body>
</html>
Stack Overflow用户
发布于 2015-02-12 20:20:04
下面的解决方案可以在不修改html的情况下解决您的问题
CSS：
body{background-color: grey;}
.books{background-color: white !important;}
.book{display: inline-block;vertical-align: top;background-color: lightblue;}
.hide,.book-content{display: none;}
.active{background-color:#F7778F;}
.cls_dsp{position: absolute;left: 8px !important;;}
.cls_ind{z-index:2;position:relative;}Jquery：
$('.book').removeClass('active');
$(document).on('click','.btn',function() {
$('.btn').parent().next().hide();
$('.btn').removeClass('active');
$(this).addClass('active');
$(this).parent().css('width',$(this).width());
$(this).parent().next().addClass('active').show();
$(this).parent().parent().addClass('books cls_dsp');
$('.book-title').addClass('cls_ind');
if ($(this).parent().parent().prev().get(0).tagName!='BR'){
$(this).parent().parent().removeClass('cls_ind');
$(this).parent().css(
'left',$(this).parent().parent().prev().children(1).position().left+
$(this).parent().parent().prev().first().width()+8);
$(this).parent().parent().nextAll().removeClass('cls_dsp').addClass('cls_ind');
$(this).parent().parent().nextAll().css(
'left',$(this).parent().position().left+$(this).parent().width()+8)}
else{
$(this).parent().parent().nextAll().removeClass('cls_dsp').addClass('cls_ind' );
$(this).parent().parent().nextAll().css('left',
$(this).parent().parent().position().left+$(this).parent().width())}
$(this).parent().parent().nextAll().children(1).css('left','0');
$(this).parent().parent().parent().css('height',
$(this).parent().parent().height()+20+'px')
});这是JSFIddle：http://jsfiddle.net/7m6oz2tv/3/
虽然该解决方案解决了上述问题，但需要改进上述编码方式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28486623
复制相关文章
相似问题
腾讯云开发者
