Question

我遇到了一个隐藏div的问题，显示在coldfusion循环的最后。当我需要它显示在每一行的正下方时。您可以在下面的URL中看到我正在谈论的内容（点击前四种香水中的任何一种下面的“了解更多”，您会看到隐藏的div显示在Fleur D'Orange香水下面。

http://www.mefragrance.com/shop.cfm?collectionid=4

我需要的是它显示在第一排4种香水下面。我还需要这个在移动设备中正确显示。所以基本上我正在寻找隐藏的div来显示每个香水的下方，但占据了整排的宽度。

现在我在完整循环之后有了div，所以我理解为什么它会在所有产品的最底层显示它。但是当我将它移到产品循环的下方或内部时，一切都变得不稳定，而且事情变得怪异。

下面是我尝试过的代码，它基本上将隐藏层放在每个div下面（即每个香水下），这就是我想要的。问题是，不是每行有4个div，而是在每个div之后放置一个中断，你只有一列完全向下。你可以在这里看到结果：

http://www.mefragrance.com/shop_test.cfm?collectionid=4

这是代码

<style>
#menu_container{
width: auto;
height: auto;
padding-left:50px;
padding-top: 20px; 
}

#menu_container div {display: none;}
</style>

<div style="display: inline-block; padding-left: 15px; ">           
    <div style="text-align: center; padding-top: 25px;">
        <img src="graphics/premixed/jasmin_epice_noir_3.4.jpg" style="max-width: 250px; height: auto;">
    </div>

    <div style="text-align: center; padding-top: 5px; " class="how-it-works-grey">
        Jasmin Épice Noir
    </div>

    <div style="text-align: center; padding-top: 15px; ">                       
        <i class="fa fa-female fa-lg"></i><img src="graphics/sex_quotient_1.png"><i class="fa fa-male fa-lg"></i>
    </div>

    <div style="text-align: center; padding-top: 25px;">
        <a class="greenbutton-42px-high" style="text-decoration:none; min-width: 150px; color: white; " href="shop.cfm?premixedid=4&fullcollection=1&collectionid=4">SHOP PRODUCTS <i class="icon-right-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
    </div>

    <div style="text-align: center; padding-top: 10px; padding-bottom: 0px;">
        <a id="show_4" class="whitebutton-42px-high" style="text-decoration:none; min-width: 150px; " href="javascript:void(0)">LEARN MORE <i class="icon-down-open-big" style="font-weight: 500; font-size: 18px; "></i></a>
    </div>                                      
</div>                  

<!-- Hidden Layer -->   
<div id="menu_container">
    <div id="menu_4" style="padding-top: 10px; padding-bottom:20px;">               
        <p class="how-it-works-grey"><u>Jasmin Épice Noir</u></p>               
        <p style="line-height: 18px; padding-top: 0px;">An irresistible fragrance that is mysterious and intensely voluptuous. A spiced floral fragrance with a precious blend of jasmine grandiflorum absolute and rich spices. A combination of spices such as black pepper & ginger root give this fragrance a spicy mix. Includes accents of almond oil & clary sage essential oil. The fragrance is then rounded out with vanilla essential oil to let the heart notes come through and give it a rich subtle sweet scent.</p>
    </div>
</div>
<!-- End Hidden Layer -->


<script>
$(document).ready(function(){
$("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $("#menu_container div").hide( "slow" ); 
  $("#menu_container #menu_"+id[1]).show( "slow" );
});
});
</script>

Answer 1

您只能使用html和css执行此操作。

你必须在每4个框（行）下创建一个div，并使用javascript将每个框内容显示在div下面。

隐藏的Div没有正确显示

1 个答案: