如何在移动设备上使用jQuery或css订购项目？
如何在移动设备上使用jQuery或css订购项目？
提问于 2018-09-20 03:30:54
我有两个主要的按钮，每个都包含子按钮的细节，在桌面上一切都很好。我希望每个父子按钮都显示在其父按钮的下面，这是我到目前为止所得到的：
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>在桌面上看起来像这样：
我想让它在手机上看起来像这样：
在手机上，当你点击其中一个按钮时，会显示两个按钮，它显示隐藏的数据所有这些我设法做到了，但我不知道如何使这些子按钮显示在每个主按钮下，现在所有的东西都显示在两个主按钮下面，任何帮助都将不胜感激
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-20 04:28:30
就我个人而言，我会稍微重新排列一下DOM，以便那些主按钮与其内容一起显示在块中。这样你就可以更好地控制CSS的行为。你可以从最低的分辨率定义外观，然后逐步提升。
- 使用低分辨率的媒体基本上完成了更高分辨率的媒体(由@
- (最小宽度:600px)定义)您可以将主要块彼此相邻浮动媒体如果需要，您甚至可以使用其他媒体查询添加更多的块，例如@
- (最小宽度: 1200px)和.main-
{
- ：600%}等
关键是，在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52413022
复制相关文章
相似问题