Question

我试图通过将内容从水平制表符拆分为垂直制表符来分解用户在移动设备上收到的信息量。

我一直在使用密码笔，但到目前为止我没有太多运气。它在移动设备上运行正常，内容至少在正确的位置，但在桌面上我无法打开第一个标签。另外，我需要确保一次只打开一个标签。

这是我到目前为止所做的，有关我可以尝试的任何建议吗？

代码

<ul class="wrapper">
  <li class="tab-outter tab-one cf"> 
    <span id='one' class="tab-handle tab-one-handle">Title 1 </span>
    <ul class="tab-content tab-content-one first-tab-desktop">
      <li> 1st Content Here </li>
    </ul>
  </li>
  <li class="tab-outter tab-two cf  "> 
    <span id='two' class="tab-handle tab-handle-two  first-tab-desktop">Title 2 </span>
    <ul class="tab-content tab-content-two  first-tab-desktop">
      <li> 2nd Content Here </li>
    </ul>
  </li>
  <li class="tab-outter tab-three  cf "> 
    <span id='three' class="tab-handle tab-handle-three first-tab-desktop">Title 3 </span>
    <ul class="tab-content tab-content-three first-tab-desktop">
      <li>3rd Content Here </li>
    </ul>
  </li>

  <li class="tab-outter tab-four cf  "> 
    <span id='four' class="tab-handle">Title 4 </span>
    <ul class="tab-content">
      <li> 4th Content Here 
        <div class="faq">
          <h5>Question</h5>
          <p>answer</p>
        </div>
      </li>
    </ul>
  </li>
  <li class="tab-outter tab-five cf  "> 
    <span id='five' class="tab-handle">Title 5 </span>
    <ul class="tab-content">
      <li>5th Content Here </li>
    </ul>
  </li>
</ul>
</div>


body { 
  font-family: helvectica, arial, sans-serif;
}

.wrapper {
  width: 60%;
  margin: 0 auto;
  position: relative;
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
}

.tab-outter {
  border: 1px solid #3e3e3e;

  @media (min-width: 640px) {
    border: none;
    display: inline-block;
  }
}

.tab-handle {
  cursor: pointer;
  padding: 10px; 
}

.tab-content {
  display: none;
  background-color: #0299ea;
  @media (min-width: 640px) {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-top: none;
  }
}

.tab-content-one {
  @media (min-width: 640px) {
    width: 33%;   
  }  
}

.tab-content-two {
  @media (min-width: 640px) {
    top: 60px;
    left: 33%;
    width: 33%;
    display: none;
  }  
}

.tab-handle-two {
  @media (min-width: 640px) {
    position: absolute;
    left: 33%;
    top: 30px;
    width: 33%;
    display: none;
  }  
}

.tab-content-three {
  @media (min-width: 640px) {
    position: absolute;
    left: 66%;
    top: 60px;
    width: 33%;   
  }  
}

.tab-handle-three {
  @media (min-width: 640px) {
    position: absolute;
    left: 66%;
    top: 30px;
    display: none;
    width: 33%;
  }  
}

.expanded {
  display: block;
}



(function ($) {

  var handle = $('.tab-handle')
  var desktopFirstTab = $('.first-tab-desktop');

  handle.click(function(e) {
    $(this).siblings('.tab-content').toggleClass('expanded');
  });

  tabControl();

  $(window).bind('resize', function () { 
    tabControl();
    console.log($(window).width());
  });


  function tabControl(e) {
    if($(window).width() > 640) {

      $(".tab-one-handle").click(function(e) {
        console.log($(this).siblings());
        desktopFirstTab.toggleClass('expanded');
      });    

      $(".tab-two-handle").click(function(e){

      });
    } 
  })(jQuery);

是否有可能在桌面上有3个水平标签，然后内容从第一个标签分割成移动设备上的5个垂直标签？

0 个答案: