javascript - 使用 Javascript 创建下拉 div

Question

我正在创建一个使用类似于以下元素的网站 this site .

将鼠标悬停在图像链接和 div 上的位置以适当的形式出现。遵循代码变得相当累人，我能够复制代码，但我得到的 java 代码只能让我工作一个 <li> , 意思相同 <li>每次我将鼠标悬停在不同的 <li> 上时都会弹出.

脚本:

<!-- 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>

HTML:

<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>

CSS:

.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;
}

如果有人能引导我朝着正确的方向前进，我将不胜感激!

Answer 1

在您的悬停功能中，您仅针对#product-data。

你需要做类似的事情

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

$(this) 是当前悬停的元素，然后选择要在当前元素中显示的元素。