Question

目标是按照产品类型组织html，目标是通过点击相应的按钮来显示或隐藏div。所以我有4个div命名框，里面组织了每个类别的容器。当我点击其中任何一个时，它会打开并显示有关该选择的信息，但其余选项不会保持在其初始位置，向左或向右移动，具体取决于所选择的元素。我试图使用display：block，position：fixed / static / absolute，但没有任何成功。没有什么，它总是在周围移动

HTML＆amp; JS

＆＃13;

     $('.top').on('click', function() {
       $parent_box = $(this).closest('.box');
       $parent_box.siblings().find('.bottom').hide();
       $parent_box.find('.bottom').toggle();

     });

＆＃13;

box {
  display: block;
  float: left;
  margin-left: 100px;
}
box a {
  display: block margin-top: 175px;
  font-family: 'Open Sans Condensed';
  color: #1B3E90;
  text-decoration: none;
  font-size: 25px
}
.bottom {
  margin-top: 35px;
  overflow: auto;
}
top:hover {
  color: #F89326;
  transform: scale(1.2);
  display: block
}
.top:target {
  display: block
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">

  <a class="top"> Fardamentos e uniformes </a>
  <div class=" bottom" style="display: none;">

    <!--- ------------- introdução de frames --------------------- -->

    <div class="responsive1" id="img1">

      <div class="img">
        <a class="open" href="#">
          <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt=" ">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">x</span>
        <h1>Box1</h1>
      </div>
    </div>

    <div class="responsive1" id="img2">

      <div class="img">
        <a class="open" href="#">
          <img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" alt=" ">
        </a>
        <div class="desc">Add a description of the image here</div>
      </div>
    </div>
    <div id="myModal2" class="modal2">
      <div class="modal-content">
        <span class="close2">x</span>
        <h1>Box2</h1>
      </div>
    </div>
  </div>
</div>



<!-- --------------------Proxima Classe de produtos -->



<div class="box">
  <a class="top"> Bibs & Batas </a>
  <div class=" bottom" style="display: none;">
    <h1> bibs e Batas </h1>
  </div>
</div>

<!-- --------------------Proxima Classe de produtos -->
<div class="box">
  <a class="top"> Confeções Variadas </a>
  <div class=" bottom" style="display: none;">
    <h1> Confeções variadas </h1>
  </div>
</div>


<!-- --------------------Proxima Classe de produtos -->
<div class="box">
  <a class="top"> Equipamento Desportivo </a>
  <div class=" bottom" style="display: none;">
    <h1> Equipamento Desportivo </h1>
  </div>
</div>

＆＃13;

现在，你可能认为我的CSS似乎不完整。好吧......我尝试了很多选项，并在此过程中添加和删除代码。

无论如何，div都不会保持固定，而是留在那里。我提出这个问题已经过了3天了，我感到沮丧和绝望。任何输入都会被夸大。

感谢

为什么div元素在点击时会横向移动？

0 个答案: