Question

点击图片后显示div的问题，页面结构如下：

 IMAGE1    IMAGE2   IMAGE3

当我点击第二张图片时，应该在第二张图片下方显示特定的div，但它看起来像是：

点击图片2后：

IMAGE1    IMAGE2    IMAGE3
CONTENT2

Content2应位于Image2

之下

只有当我点击序列1-2-3中的图像时，所有带内容的div才会显示出来，而我认为这是因为bootstrap的类col-md已将float设置为剩下。我怎么解决这个问题？为了在点击Image3之后，Content3将显示在Image3

下

JavaScript的：

var images = $(".flower-image");


images.on("click", function() {

var index = images.index(this);


$(".content-flowers").eq(index).toggle(1000);
});

HTML：

div class="row">
    <div class="panel-heading text-center">

                    <div style="display: none;" class="content-flowers">
                        <div class="col-md-4">
                            <div class="panel-heading text-center">
                                <p> CONTENT </p>                                                                
                            </div>
                        </div>
                    </div>

                    <div style="display: block;" class="content-flowers">
                        <div class="col-md-4">
                            <div class="panel-heading text-center">
                                <p> CONTENT </p>    
                            </div>
                        </div>
                    </div>

                    <div style="display: block;" class="content-flowers">
                        <div class="col-md-4">
                            <div class="panel-heading text-center">
                                <p> CONTENT </p>        
                            </div>
                        </div>
                    </div>
        </div>
    </div>

Answer 1

如果包含“CONTENT”的<p>标签具有指定的大小，则可以创建一个用作占位符的空元素。当您切换CONTENT <p>元素时，您还可以分别切换空占位符元素。

Answer 2

var images = $(".flower-image");


images.on("click", function() {    
      var index = images.index(this); 
      $(".content-flowers").eq(index).toggle(1000).addClass('md-col-offset-' + index * 4);
});

或者在html中使用css类 col-md-offset-4 属性

div class="row">
    <div class="panel-heading text-center">

                    <div style="display: none;" class="content-flowers">
                        <div class="col-md-4 ">
                            <div class="panel-heading text-center">
                                <p> CONTENT </p>                                                                
                            </div>
                        </div>
                    </div>

                    <div style="display: block;" class="content-flowers">
                        <div class="col-md-4 col-md-offset-4">
                            <div class="panel-heading text-center">
                                <p> CONTENT </p>    
                            </div>
                        </div>
                    </div>

                    <div style="display: block;" class="content-flowers">
                        <div class="col-md-4 col-md-offset-8">
                            <div class="panel-heading text-center">
                                <p> CONTENT </p>        
                            </div>
                        </div>
                    </div>
        </div>
    </div>

Answer 3

元素的脚手架和定位很重要。它从一行开始，然后是列。我在这里创造了一个小提琴，应该接近你所要求的。

https://jsfiddle.net/mw9g0eLk/8/

HTML：

<div class="row">
  <div class="col-sm-4">
    <div class="panel-heading text-center">
      <img class="img1 flower-image" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="width:50px;" />
      <div style="display: none;" class="content-flowers">
    <div class="col-md-4">
      <div class="panel-heading text-center">
        <p> CONTENT IMG1 </p>
      </div>
    </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="panel-heading text-center">
      <img class="img2 flower-image" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="width:50px;" />
      <div style="display: none;" class="content-flowers">
    <div class="col-md-4">
      <div class="panel-heading text-center">
        <p> CONTENT IMG2 </p>
      </div>
    </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="panel-heading text-center">
      <img class="img3 flower-image" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif" style="width:50px;" />
      <div style="display: none;" class="content-flowers">
    <div class="col-md-4">
      <div class="panel-heading text-center">
        <p> CONTENT IMG3 </p>
      </div>
    </div>
      </div>
    </div>
  </div>
</div>

JS：

var images = $(".flower-image");

images.on("click", function() {
  var index = images.index(this);
  $(".content-flowers").eq(index).toggle(1000);
});

jQuery / bootstrap - div显示在意外的地方

3 个答案: