Question

我是新手，我偶然发现了一个更复杂的电网情况

HTML

<section id="management">
 <div class="row">
  <div class="small-12 large-3 columns">
   <h3>TITLE 1</h3>
   <p>Some text for title 1</p>
   <a id="tab1" class="btn tab" role="button" title="Tarefas Básicas">Show Content 1</a>
  </div>
  <div class="small-12 large-3 columns">
   <h3>TITLE 2</h3>
   <p>Some text for title 2</p>
   <a id="tab2" class="btn tab" role="button" title="Tarefas Básicas">Show Content 2</a>
  </div>
  <div class="small-12 large-3 columns">
   <h3>TITLE 3</h3>
   <p>Some text for title 3</p>
   <a id="tab3" class="btn tab" role="button" title="Tarefas Básicas">Show Content 3</a>
  </div>
  <div class="small-12 large-3 columns">
   <h3>TITLE 4</h3>
   <p>Some text for title 4</p>
   <a id="tab4" class="btn tab" role="button" title="Tarefas Básicas">Show Content 4</a>
  </div>
</div>
<div class="tasks">
 <div class="row">
  <div id="tab1show" class="tab-content">
    <h3>HIDE CONTENT 1</h3>
    <p>Some Text for content 1 needed to be a bit longer</p>
  </div>

  <div id="tab2show" class="tab-content">
    <h3>HIDE CONTENT 2</h3>
    <p>Some Text for content 2</p>
  </div>

  <div id="tab3show" class="tab-content">
    <h3>HIDE CONTENT 3</h3>
    <p>Some Text for content 3</p>
  </div>

  <div id="tab4show" class="tab-content">
    <h3>HIDE CONTENT 4</h3>
    <p>Some Text for content 4</p>
  </div>
</div>

JS

var $contents = $('.tab-content');
 $contents.slice().hide();
 $('.tab').click(function() {
 var $target = $('#' + this.id + 'show').toggle();
 $contents.not($target).hide();
});

http://codepen.io/lookshinji/pen/YXgNMP

所以试图解释我想要实现的目标：我有一个显示/隐藏内容通过jQuery，这是按预期工作，但它显示所有那些可见内容之后的内容，在大屏幕上是完美的。但是当我进入一个小屏幕时，我会逐个堆叠每个可见内容，如果我点击显示，内容会显示在所有内容之后，用户无法看到它，所以我想在每个内容后直接显示移动设备上的可见内容。

如果我这样离开，我在移动设备上有问题，如果我在每个可见的内容中移动eache隐藏内容我在大屏幕上有网格问题导致我的内容只有3列很大，任何人都有想法如何以更好的方式显示它？

基础5嵌套在小而不嵌套在大

0 个答案: