简体   繁体   中英

How to create drop down menus on dynamically generated div fields

I am loading divs with information from the database using php code:

for ($i=0; $i < $stmt->rowCount(); $i++){
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $name = $row['uc_name'];
    $image_url = $row['uc_image'];
    $color = $row['uc_color'];

The creates a box for however many rows there are: http://jsfiddle.net/pKR5t/1/

I am trying to create a drop down menu for each item retrieved from the database. When the user hovers over class="header" , the drop down menu should show but the list inside should be pertaining to that of the box hovered:

在此处输入图片说明

I believe I can use the .on() function to accomplish this but I am completely lost on how to use it. Any help on getting this accomplished would be helpful. Thanks

You can do this without javascript using css.

If you insert your hover box inside your header div you can use css :hover to hide and show it on hover.

HTML

<div class="header">
    <div class="title">PHP Row 1</div>
    <div class="hoverBox">
        <div class="hoverBoxTitle">Hover</div>
        <div class="hoverBoxContent">Hover Content</div>
    </div>
</div>

CSS

.hoverBox {
    display: none;
    position: absolute;
    top: 0px;
    left: 170px;
    width:170px;
    height:90px;
    background:#333333;
    z-index: 100;
}
.header:hover .hoverBox {
    display: block;
}

Demo

To use on and hover you will want to use the mouseenter and mouseleave events like so:

$("div.box div.header").on("mouseenter", function() { //mouseenter event
    var currentBox = $(this).closest("div.box");
    var currentTitleText = $(this).find("div.title").html();

    //popup the list

}).on("mouseleave", function() { //mouseleave event
    //close the list
});

For some additional info, check this post .

EDIT

Updated mouseover and mouseout to the slightly better mouseenter and mouseleave events.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM