Question

实际上，这使我的问题更加明确：

设置：我有8个可点击的图标。在更大的屏幕上，它们连续三个，三个连续，然后连续两个。在移动屏幕上，图标在垂直方向上一个在另一个上面。以此为例：http://winter-construction.com/services/

问题：当我点击一个图标时，我想要一个段落来解释图标。然而，这里有一个问题：在移动屏幕上，我希望单个段落在每个单独的图标下方切换。在更大的屏幕上，我希望单个段落在图标行下方切换，因此它们不会移动很多。

我该怎么做？我会将它附加到小屏幕上的图标中，并将其附加到大屏幕的行div中吗？代码如下：

HTML：

<!--------------- Services  ----------------------------->
<!----- ROW 1 ----->
<div class="row col-xs-12">
<!--- ICON 1 ----->
  <div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption1">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 1</h5>
  </div>
<!--- ICON 2 ----->       
  <div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption2">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 2</h5>
  </div>
<!--- ICON 3 ----->
  <div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption3">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 3</h5>
  </div>
</div>

<!--- ROW 2 ----->
<div class="row col-xs-12">
<!--- ICON 4 ----->
  <div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 4</h5>
  </div>
 <!--- ICON 5 ----->  
  <div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 5</h5>
  </div>
 <!--- ICON 6 ----->
  <div class="col-sm-4 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 6</h5>
  </div>
</div>

<!----- ROW 3 ------->
<div class="row">
<!--- ICON 7 ----->
  <div class="col-sm-4 col-sm-offset-1 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 7</h5>
  </div>
<!--- ICON 8 ----->
  <div class="col-sm-4 col-sm-offset-1 col-xs-12 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 8</h5>
  </div>
</div>

<div id="iconParagraphs" class="col-xs-10 col-xs-offset-1 p-t-1">
    <div class="serviceOption1 text"> Text 1 </div>
    <div class="serviceOption2 text"> Text 2 </div>
    <div class="serviceOption3 text"> Text 3 </div>
    <div class="serviceOption4 text"> Text 4 </div>
    <div class="serviceOption5 text"> Text 5 </div>
    <div class="serviceOption6 text"> Text 6 </div>
    <div class="serviceOption7 text"> Text 7 </div>
    <div class="serviceOption8 text"> Text 8 </div>
</div>

这里是CSS（只是隐藏段落）：

.text{

display：none; }

和我的JQuery骨架。这可能不是最快的方式，所以如果有更快的事情，请告诉我：

// When screen is less than 544 px, or 'mobile':
// When icon is clicked,
  $('a').click(function(){
// Get div with matching class of this element's ID
// Append that div after this anchor element
// When screen is 544px or greater:
// When icon is clicked,
// Get div with matching class of this element's ID
// Append it after this anchor element's row   
 }); // end SERVICES function

Answer 1

我修改了你的小提琴： https://jsfiddle.net/v0rhknmw/20/

我在课程div中添加了两个block。这包含您想要的许多图标。之后，我创建了一个div，其中包含您将在图标下方显示的所有文字。

它有点难看，但它的工作正常。

请尝试：

＆＃13;

$('.m-b-2').click(function(){
  $.each($("#serviceOptionParagraph").find(".blockText"),function(){
    $(this).hide()
  })
  $(this).closest(".block").after($("#serviceOptionParagraph").show())
  $("#serviceOptionParagraph").find("."+$(this).attr("id")).show()
});

＆＃13;

/*--------------- Services Icons --------------------*/
i{
    cursor: pointer;
}

#serviceOptionParagraph{
    border: 1px solid #FF3B17;
    border-radius: 5px;
    padding: 3%;
    display: none;
}
.serviceOptionParagraph{
  display:none;
  
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption1">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 1</h5>
  </div>
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption2">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 2</h5>
  </div>
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption3">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 3</h5>
  </div>
</div>
<div class="block">
  <div class="col-md-4 col-xs-6 text-xs-center m-b-2" id="serviceOption4">
    <a><i class="fa fa-laptop fa-5x m-b-1" aria-hidden="true"></i></a>
    <h5>Icon 4</h5>
  </div>
</div>
<div id="serviceOptionParagraph" class="col-xs-10 col-xs-offset-1 p-t-1">
  <div class="serviceOption1 blockText"> 
    <img width="50%" src="http://cdn.winter-construction.com/wp-content/uploads/BIM-ReptileHouse1.jpg" >
  </div>
  <div class="serviceOption2 blockText"> Text 2</div>
  <div class="serviceOption3 blockText"> Text 3</div>
  <div class="serviceOption4 blockText"> Text 4</div>
</div>

＆＃13;

在段落中滑动时如何防止图标跳下（jQuery）

1 个答案: