Question

我有一个顶部有多个div的背景图像，作为图像部分的“标签”。我只想显示div的标题/标题，然后当你点击div时，段落（描述）显示（有点像'阅读更多'）。每个div都有自己的id，我想要显示的每个段落都有自己的id。我是使用jQuery的新手，无法弄清楚如何：

将我的jQuery组合在一起所以它不是那么重复
当您单击另一个“标签”以查看更多时关闭打开的段落（因此，如果我单击第一个标签以阅读说明，然后单击第二个以阅读第二个描述，则第一个应该关闭）。
当段落显示时重新定位div，使其正确放置在图像的特定部分（现在我用.animate发生了它，但我无法弄清楚如何让它回到它的正常位置当段落结束时）。不确定是不是。
使字体很棒“向下插入符号”，当它不可见时返回。

这里是jsfiddle https://jsfiddle.net/dmo1111/8n1bLb52/#&togetherjs=cB0QuczANm

CSS

[mobile] {
  position: relative;
  padding: 20px 10px 50px 10px;
    [info~="mobile"] {
            position: absolute;
            z-index: 10;
            top: -10px;
        #show1,
                #show2,
                #show3,
                #show4,
                #show5,
                #show6,
                #show7 {
                    display: none;
                    padding-bottom: 15px;
                }
        }
}

HTML

<div mobile>
  <div info="mobile" id="mobile1">
    <h3 class="great-primer">Title 1 <i class="fa fa-caret-down"></i></h3>
    <p class="long-primer" id="show1">Paragprah description for first label.</p>
  </div>
  <div info="mobile" id="mobile2">
    <h3 class="great-primer">Title 2 <i class="fa fa-caret-down"></i></h3>
    <p class="long-primer" id="show2">Paragprah description for second label.</p>
  </div>
  <div info="mobile" id="mobile3">
    <h3 class="great-primer">Title 3 <i class="fa fa-caret-down"></i></h3>
    <p class="long-primer" id="show3">Paragprah description for third label.</p>
  </div>
  <div info="mobile" id="mobile4">
    <h3 class="great-primer">Title 4 <i class="fa fa-caret-down"></i></h3>
    <p class="long-primer" id="show4">Paragprah description for fourth label.</p>
  </div>
  <div info="mobile" id="mobile5">
    <h3 class="great-primer">Title 5 <i class="fa fa-caret-down"></i></h3>
    <p class="long-primer" id="show5">Paragraph description for fifth label.</p>
  </div>
</div>

jquery的

$("#mobile1").click(function() {
  $("#show1").toggle(1000);
  $(this).animate({
    top: '10px'
  });
});
$("#mobile2").click(function() {
  $("#show2").toggle(1000);
  $(this).animate({
    top: '20px'
  });
});
$("#mobile3").click(function() {
  $("#show3").toggle(1000);
  $(this).animate({
    top: '50px'
  });
});
$("#mobile4").click(function() {
  $("#show4").toggle(1000);
  $(this).animate({
    top: '60px'
  });
});
$("#mobile5").click(function() {
  $("#show5").toggle(1000);
  $(this).animate({
    top: '80px'
  });
});

对不起，如果这看起来像一团糟/很多一次！我整个早上都搜索了一堆论坛来帮助我，但没有运气。我希望自己可以搞清楚，但我也不太了解jQuery，以确保它是“最简单的”如果有人能帮助我，我会非常感激！

Answer 1

您的代码的简化版本：

<script>
$(document).ready(function(){
   $("#mobile1, #mobile2, #mobile3, #mobile4, #mobile5").click(function() {
       $(this).find('.long-primer').toggle(1000);
       var divTop = $(this).position().top;
       $(this).animate({
       top: divTop+'10px'
     });
   }); 
});
</script>

更好的选择：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Example</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Title 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Paragprah description for first label.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Title 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Paragprah description for second label.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Title 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Paragprah description for third label.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Title 4</a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
        <div class="panel-body">Paragprah description for fourth label.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Title 5</a>
        </h4>
      </div>
      <div id="collapse5" class="panel-collapse collapse">
        <div class="panel-body">Paragprah description for fifth label.</div>
      </div>
    </div>
  </div> 
</div>
    
</body>
</html>

单击特定div

1 个答案: