javascript - 如何在移动设备上使用 jQuery 或 css 订购商品？

Question

我有两个主按钮，每个按钮都包含子按钮的详细信息，在桌面上一切正常。我希望每个父级子按钮都显示在其父级下方，这是我目前所拥有的:

HTML

<div class="main-data">
   <div class="main-data_butttons">
      <div class="main-data_button-left">Trump</div>
      <div class="main-data_button-right">Babab Yaga</div>
   </div>
   <div class="main-data-buttons-left_details">
      <div class="main-data-buttons_details-first">Test</div>
      <div class="main-data-buttons_details-second">Test</div>
      <div class="main-data-buttons_details-third">Test</div>
      <div class="main-data-buttons_details-fourth">Test</div>
   </div>
   <div class="main-data-buttons-right_details">
      <div class="main-data-buttons_details-first">Test</div>
      <div class="main-data-buttons_details-second">Test</div>
      <div class="main-data-buttons_details-third">Test</div>
      <div class="main-data-buttons_details-fourth">Test</div>
   </div>
</div>

在桌面上看起来像这样:

我希望它在移动设备上看起来像这样:

在移动设备上，当您单击其中一个按钮时，会显示两个按钮，它会显示隐藏数据所有这些我都设法做到了，但我无法弄清楚让这些子按钮显示在每个主按钮下方，现在显示所有内容在两个主要按钮下方，我们将不胜感激

Answer 1

就我个人而言，我会稍微重新安排一下 DOM，以便那些主要按钮与其内容成 block 。这样你就可以更好地控制 CSS 的行为。您可以从最低分辨率开始定义外观，然后逐步提高。

• 在低分辨率下你基本上就完成了
• 在更高的分辨率(由@media (min-width: 600px) 定义)上，您将主要 block 彼此相邻 float
• 如果需要，您甚至可以使用另一个媒体查询在更高分辨率上添加更多 block ，例如@media (min-width: 1200px) 并制作 .main-data { width: 33.333333% } 等等<

重点是，在 CSS 中重新排列 DOM 并不容易。至少在你的情况下不是。您当然可以使用 javascript，但无论如何您都需要对 DOM 进行一些更改。

var $mainDataButton = $('.main-data-button');

$mainDataButton.on('click', function() {
  $(this).next().toggle();
});

* { margin: 0; padding: 0; } 

.main-data-button, 
.main-data-buttons div { display: inline-block; margin: 5px; border: 1px solid purple; padding: 10px; background: #fafafa; }
.main-data-button { padding: 30px; }
.main-data-buttons { display: none; }

@media (min-width: 600px) {
  .main-data { float: left; width: 50%; }
  .main-data-buttons { display: block !important; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-data">
	<div class="main-data-button">Main button left</div>
	<div class="main-data-buttons">
		<div class="main-data-buttons_details-first">Test</div>
		<div class="main-data-buttons_details-second">Test</div>
		<div class="main-data-buttons_details-third">Test</div>
		<div class="main-data-buttons_details-fourth">Test</div>
	</div>
</div>
<div class="main-data">
	<div class="main-data-button">Main button right</div>
	<div class="main-data-buttons">
		<div class="main-data-buttons_details-first">Test</div>
		<div class="main-data-buttons_details-second">Test</div>
		<div class="main-data-buttons_details-third">Test</div>
		<div class="main-data-buttons_details-fourth">Test</div>
	</div>
</div>