javascript - 具有全宽下拉面板的流体 CSS 产品网格(无绝对定位)

标签 javascript php jquery html css

我看到了一个看起来非常具有挑战性的设计，我似乎无法在自己的脑海中找到解决方案，所以我正在接触社区，看看是否有人遇到过类似的问题。

我有一家电子商务商店，它有一个类别登陆页面，标记与上面的标记类似，尽管上面的标记已针对问题的目的进行了简化。内容由 PHP 生成，因此需要在 foreach 循环中以这种方式设置。

这个想法是你有这个响应式网格，范围从 1 项到 20 项(如果需要)，它显示有关对应类别的信息，它是一个缩小版本。当您单击“查看更多”按钮/链接时，另一个面板会下拉，从而显示更多详细信息。我的问题是，因为元素是固定宽度的，而且它们都向左浮动，所以它们显示在网格中，我的子类别下降然后被父容器绑定(bind)，有没有办法让这个下拉面板显示其父容器之外的全宽？在网格项下方(参见图表)，并且也不是绝对定位，因为我希望下拉面板下方的网格项可以用一些 jQuery 向下推。

<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<style type="text/css">
		.subcategory-grid {
			padding: 0 0 120px;
			max-width: 1280px;
			margin-left: auto;
			margin-right: auto
		}

		.subcategory-grid::after {
			clear: both;
			content: "";
			display: table
		}

		.subcategory-grid::after {
			clear: both;
			content: "";
			display: table
		}

		.subcategory-grid .subcategory-item {
			cursor: pointer;
			margin-top: 28px;
			margin-bottom: 28px
		}

		.subcategory-grid .subcategory-item img {
			max-width: 100%;
			min-width: 100%
		}

		@media screen and (min-width: 768px) {
			.subcategory-grid .subcategory-item-container {
				float: left;
				display: block;
				margin-right: 1.75788%;
				width: 49.12106%;
				margin-top: 28px;
				margin-bottom: 28px;
				float: left !important
			}

			.subcategory-grid .subcategory-item-container:last-child {
				margin-right: 0
			}

			.subcategory-grid .subcategory-item-container:nth-child(2n) {
				margin-right: 0
			}

			.subcategory-grid .subcategory-item-container:nth-child(2n+1) {
				clear: left
			}
		}

		.subcategory-grid .subcategory-item-container:hover .view-more {
			border-bottom: 6px solid #000
		}

		.subcategory-grid .subcategory-info {
			text-align: center
		}

		.subcategory-grid .subcategory-info h2 {
			margin-top: 25px
		}

		.subcategory-grid .subcategory-info h2 a {
			font-size: 24px
		}

		.subcategory-grid .subcategory-info .category-description {
			margin: 20px 0
		}

		.subcategory-grid .subcategory-info .view-more {
			text-align: center !important;
			background: url('../img/icon/arrow-right-black.png?1437173465') no-repeat right 1px;
			padding-right: 15px;
			padding-bottom: 10px
		}

		.subcategory-grid .subcategory-info .view-more:hover {
			border-bottom: 6px solid #000
		}

		.subcategory-grid .subcategory-drop {
			display: none;
			border-top: 1px solid #cecece;
			border-bottom: 1px solid #cecece;
			padding-bottom: 35px
		}

		.subcategory-grid .subcategory-drop .title {
			position: relative;
			display: block
		}

		.subcategory-grid .subcategory-drop .title h2 {
			font-size: 1.875rem;
			text-align: center;
			border-bottom: 6px solid #000;
			margin: 35px auto;
			max-width: 426px;
			padding-bottom: 5px
		}

		.subcategory-grid .subcategory-drop .title .close-button {
			position: absolute;
			height: 30px;
			width: 30px;
			overflow: hidden;
			text-indent: 100%;
			white-space: nowrap;
			display: block;
			right: 0;
			top: 0;
			background: url('../img/icon/cart-icon-remove.png?1437234524') no-repeat 0 0
		}

		.subcategory-grid .subcategory-drop .top strong {
			text-transform: uppercase
		}

		.subcategory-grid .subcategory-drop .top p, .subcategory-grid .subcategory-drop .top .block-video-hub .videohub-item .videohub_item_subtitle, .block-video-hub .videohub-item .subcategory-grid .subcategory-drop .top .videohub_item_subtitle {
			margin-bottom: 22px
		}

		.subcategory-grid .subcategory-drop .middle {
			padding: 15px 0
		}

		.subcategory-grid .subcategory-drop .middle ul li {
			padding: 7px 0
		}
	</style>
</head>
<body>
	<div class="subcategory-grid">
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">

			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
$(document).ready(function () {
	var container = $('.subcategory-grid'),
	rangePanel = container.find('.subcategory-item');

	rangePanel.each(function () {
		var _this = $(this);
		var viewMore = _this.find('.view-more');

		viewMore.on('click', function () {
			var dropPanel = $(this).closest('.subcategory-item-container').find('.subcategory-drop');
			var closeButton = dropPanel.find('.close-button');

			dropPanel.fadeIn();

			closeButton.on('click', function () {
				dropPanel.fadeOut();
			});
		});
	});
});
</script>
</html>

请参阅此图了解更多信息:

diagram

最佳答案

您可以在媒体查询中使用以下 CSS，但您需要更新您的 javascript 以确保一次只有一个下拉菜单可见。否则他们会重叠。我把 $('.subcategory-drop').fadeOut();//仅用于演示 在 vi​​ewMore click 函数中。

.subcategory-grid .subcategory-drop {
    left: -103.516%;
    position: relative;
    width: 203.516%;
}

.subcategory-grid .subcategory-item-container:nth-child(2n+1) .subcategory-drop {
    left: 0;  /* reset left on odd items */
}

/**** OR This - A little better optimized than the above ****/

.subcategory-grid .subcategory-drop {
    position: relative;
    width: 203.516%;
}

.subcategory-grid .subcategory-item-container:nth-child(2n) .subcategory-drop {
    left: -103.516%; /* set left on even items */
}

片段

<!DOCTYPE html>
<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<style type="text/css">
		.subcategory-grid {
			padding: 0 0 120px;
			max-width: 1280px;
			margin-left: auto;
			margin-right: auto
		}

		.subcategory-grid::after {
			clear: both;
			content: "";
			display: table
		}

		.subcategory-grid::after {
			clear: both;
			content: "";
			display: table
		}

		.subcategory-grid .subcategory-item {
			cursor: pointer;
			margin-top: 28px;
			margin-bottom: 28px
		}

		.subcategory-grid .subcategory-item img {
			max-width: 100%;
			min-width: 100%
		}

		@media screen and (min-width: 768px) {
			.subcategory-grid .subcategory-item-container {
				float: left;
				display: block;
				margin-right: 1.75788%;
				width: 49.12106%;
				margin-top: 28px;
				margin-bottom: 28px;
				float: left !important
			}

			.subcategory-grid .subcategory-item-container:last-child {
				margin-right: 0
			}

			.subcategory-grid .subcategory-item-container:nth-child(2n) {
				margin-right: 0
			}

			.subcategory-grid .subcategory-item-container:nth-child(2n+1) {
				clear: left
			}
        .subcategory-grid .subcategory-drop {
			left: -103.516%;
			position: relative;
			width: 203.516%;
    	}

			.subcategory-grid .subcategory-item-container:nth-child(2n+1) .subcategory-drop {
			    left: 0;
			}
		}

		.subcategory-grid .subcategory-item-container:hover .view-more {
			border-bottom: 6px solid #000
		}

		.subcategory-grid .subcategory-info {
			text-align: center
		}

		.subcategory-grid .subcategory-info h2 {
			margin-top: 25px
		}

		.subcategory-grid .subcategory-info h2 a {
			font-size: 24px
		}

		.subcategory-grid .subcategory-info .category-description {
			margin: 20px 0
		}

		.subcategory-grid .subcategory-info .view-more {
			text-align: center !important;
			background: url('../img/icon/arrow-right-black.png?1437173465') no-repeat right 1px;
			padding-right: 15px;
			padding-bottom: 10px
		}

		.subcategory-grid .subcategory-info .view-more:hover {
			border-bottom: 6px solid #000
		}

		.subcategory-grid .subcategory-drop {
			display: none;
			border-top: 1px solid #cecece;
			border-bottom: 1px solid #cecece;
			padding-bottom: 35px
		}

		.subcategory-grid .subcategory-drop .title {
			position: relative;
			display: block
		}

		.subcategory-grid .subcategory-drop .title h2 {
			font-size: 1.875rem;
			text-align: center;
			border-bottom: 6px solid #000;
			margin: 35px auto;
			max-width: 426px;
			padding-bottom: 5px
		}

		.subcategory-grid .subcategory-drop .title .close-button {
			position: absolute;
			height: 30px;
			width: 30px;
			overflow: hidden;
			text-indent: 100%;
			white-space: nowrap;
			display: block;
			right: 0;
			top: 0;
			background: url('../img/icon/cart-icon-remove.png?1437234524') no-repeat 0 0
		}

		.subcategory-grid .subcategory-drop .top strong {
			text-transform: uppercase
		}

		.subcategory-grid .subcategory-drop .top p, .subcategory-grid .subcategory-drop .top .block-video-hub .videohub-item .videohub_item_subtitle, .block-video-hub .videohub-item .subcategory-grid .subcategory-drop .top .videohub_item_subtitle {
			margin-bottom: 22px
		}

		.subcategory-grid .subcategory-drop .middle {
			padding: 15px 0
		}

		.subcategory-grid .subcategory-drop .middle ul li {
			padding: 7px 0
		}
        
	</style>
</head>
<body>
	<div class="subcategory-grid">
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">

			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
		<div class="subcategory-item-container">
			<div class="subcategory-item">
				<!--Item Content-->
				<img src="http://placehold.it/620x350"/>
				<a href="#" class="view-more">View More</a>
				<div class="subcategory-drop is-hidden">
					<!--Drop Down Content-->
					<p>Hello from the dropdown</p>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
$(document).ready(function () {
	var container = $('.subcategory-grid'),
	rangePanel = container.find('.subcategory-item');

	rangePanel.each(function () {
		var _this = $(this);
		var viewMore = _this.find('.view-more');

		viewMore.on('click', function () {

           // Just for demonstration
           $('.subcategory-drop').fadeOut();

			var dropPanel = $(this).closest('.subcategory-item-container').find('.subcategory-drop');
			var closeButton = dropPanel.find('.close-button');

			dropPanel.fadeIn();

			closeButton.on('click', function () {
				dropPanel.fadeOut();
			});
		});
	});
});
</script>
</html>

关于javascript - 具有全宽下拉面板的流体 CSS 产品网格(无绝对定位)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31541682/

上一篇：html - 横幅圈响应

下一篇：javascript - Node.js 添加 'semi-dynamic' 内容的最佳方式

相关文章：

javascript - 调用函数未按预期给出输出

javascript - jquery:当 'hover' 在 '.myBox' 上解除绑定(bind)时执行某些操作？

.net - 收到 500 内部服务器错误

javascript - json解码错误

javascript - 如何返回不带任何扩展名的文件名？

javascript - 图像像素化的 CSS 变换

php/模板与回显

php - 我如何从mysql中获取数据以表现

php - 快速 [php 函数] -> [javascript 函数] 问题

jquery - 通过使用 jQuery 单击 anchor 来平滑滚动元素

©2024 IT工具网  联系我们