Question

我正在尝试根据我当前的HTML结构创建标签式导航。基本上，我希望能够将书名显示为选项卡下方的标签和书籍详细信息。像这样：

This is what I want

修改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>

Answer 1

$(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>

Answer 2

以下解决方案将解决您的问题而无需修改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/

尽管这个解决方案解决了这个问题，但需要帮助来改进上述编码风格。

CSS / Jquery在父元素后显示子元素

2 个答案: