单击特定div

时间:2017-06-01 17:35:09

标签: jquery

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

  1. 将我的jQuery组合在一起所以它不是那么重复
  2. 当您单击另一个“标签”以查看更多时关闭打开的段落(因此,如果我单击第一个标签以阅读说明,然后单击第二个以阅读第二个描述,则第一个应该关闭)。
  3. 当段落显示时重新定位div,使其正确放置在图像的特定部分(现在我用.animate发生了它,但我无法弄清楚如何让它回到它的正常位置当段落结束时)。不确定是不是。
  4. 当段落可见时,
  5. 使字体很棒“向下插入符号”,当它不可见时返回。
  6. 这里是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,以确保它是“最简单的”如果有人能帮助我,我会非常感激!

1 个答案:

答案 0 :(得分: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>