使用Javascript创建下拉div

我正在创建一个使用类似 .

当您将鼠标悬停在图像链接上时，

div

会以适当的形式出现。遵循代码已经变得相当累人，我能够复制代码，但是我得到的java代码只允许我工作一个

，这意味着每次我悬停在不同的

上时都会弹出相同的

脚本：

<!-- Hover Drop -->
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#product-data").hide();

    var isMousedOver;

    var hideDropdown = function (a) {
        setTimeout(function () {
            if (isMousedOver) return;
            $("#product-data").slideUp("medium");
            $(a).removeClass("active");
        }, 100);
    }

    $(".btn-slide").hover(

    function () {
        $("#product-data").stop(true, true).slideDown("medium");
        isMousedOver = true;
        $(".btn-slide").removeClass("active");
        $(this).addClass("active");
        var that = this;
        $("#product-data").data("mouseoutfn", function () {
            hideDropdown(that)
        });
    },

    function () {
        isMousedOver = false;
        hideDropdown(this);
    });

    $("#product-data").hover(

    function () {
        isMousedOver = true;
    },

    function () {
        isMousedOver = false;
        $(this).data("mouseoutfn")();
    });

});
</script>

<li class="item first">
    <div class="hover-cut"> <a href="" class="btn-slide"><img src="../images/mexalturantollan.png" width="172" height="120"
               alt="Mexalturan"></a>

         <h2 class="product-name">Organic Mexico
               ‘Altura Tollan’ Fair Trade</h2>

        <div class="price-box"><span class="price-label">$13.37 per lb</span> 
            <div id="product-data">
                <div class="details"><u>Flavor Profile:&nbsp;</u>
Noted for ...........................</div>
            </div>
        </div>
</li>
<li class="item first">
    <div class="hover-cut"> <a href="" class="btn-slide"><img src="../images/mexspirits.png" width="172" height="120" alt=""></a>

         <h2 class="product-name">Mexican ‘Spirit of the Aztec’</h2>

        <div class="price-box"> <span class="price-label">$12.38 per lb</span>

            <div class="product-data1"> <u>Flavor Profile:&nbsp;</u>
Time to .........................</div>
        </div>
</li>

.theshopbox ul.gridrow1 li.item.first {
    margin-right: 25px;
}
#hover-cut {
    position: relative;
    padding: 20px;
    width: 230px;
    overflow:visible;
    z-index: 999;
}
#product-data {
    background-color: rgb(5, 22, 7);
    box-shadow: 2.5px 4.33px 5px 0px rgb(0, 0, 0);
    /* Rounded Corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display: none;
    position:relative;
    border-radius: 18px;
    overflow: visible;
    width: 256px;
    z-index:-4;
}
.price-box {
    float:left;
}
.product-name {
    font-size: 14px;
    font-weight: bold;
}
.details {
    font-size: 12px;
    margin-left: 28px;
    margin-right: 28px;
    text-align:left;
}
.active {
}
.gridrow1 .item #product-data {
    display: block;
    margin-top: 4px;
}
.gridrow1 .item #product-data {
    display: none;
}
.products-grid .learn-more {
    display: inline-block;
    font-weight: bold;
    font-size: 13px;
    color: #361a00;
    margin-top: 2px;
}
.gridrow1 li.item {
    float: left;
    width: 256px;
    padding: 0px 10px 0px 0px;
    overflow: hidden;
    position: relative;
    height: 294px;
}
.theshopbox {
    width: 930px;
    height: 1200px;
    float: left;
    margin-top: 23px;
    position: relative;
    left: 6px;
    top: 80px;
    z-index: 1;
    color: #0A0A0A;
}

如果有人能指引我走向正确的方向，我将万分感激
 在悬停功能中，您只针对#产品数据

你需要做一些类似的事情

$(this).find('.element-to-show').slideDown()

$（此）
是当前悬停的元素，然后选择要在当前元素中显示的元素。
它只是一个
。在jquery中，悬停
函数需要定义加载时元素的高度，并在鼠标悬停时更改其高度。
试试这个

jquery

$('.element').hover(function() {
$(this).css('height', '300px');
},
function() {
$(this).css('height', '100px'); 
});

检查

在悬停状态下，您将显示仅涉及一种产品的id产品数据信息

使用$（this）.find（）或jquery遍历来解决此问题

以下是
请将问题减少到适当的程度。并提供一把小提琴。你为什么需要JavaScript呢。下面是一个使用CSS for you功能表的优秀演示：
.element
{width:100px;
height:150px;
background:#ccc;
float:left;
margin-left:10px;
cursor:pointer;
}

$('.element').hover(function() {
$(this).css('height', '300px');
},
function() {
$(this).css('height', '100px'); 
});

$(".btn-slide").hover(

function () {
    $("#product-data").stop(true, true).slideDown("medium");
    isMousedOver = true;
    $(".btn-slide").removeClass("active");
    $(this).addClass("active");
    var that = this;
    $("#product-data").data("mouseoutfn", function () {
        hideDropdown(that)
    });
},