基于jQuery实现鼠标悬停时下拉菜单右侧文本框滑入效果

核心思路 #

借助CSS定位+过渡动画，搭配jQuery监听悬停事件，实现文本框平滑滑入滑出，同时兼容Bootstrap原有下拉菜单逻辑。

具体实现步骤 #

1. 补充HTML结构 #

在下拉菜单父元素内新增文本框容器，给每个服务项添加说明文本的自定义属性：

<li class="dropdown" id="services-dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
    <!-- 新增服务说明文本框 -->
    <div class="service-tooltip">
        <div class="tooltip-content">
            <p>这里展示对应服务的详细说明</p>
        </div>
    </div>
    <ul class="dropdown-menu w-100">
        <li><a href="#" class="service-item" data-desc="服务1的详细介绍，比如核心功能、适用场景">Service 1</a></li>
        <li><a href="#" class="service-item" data-desc="服务2的特色优势，对比同类服务的差异化">Service 2</a></li>
        <li><a href="#" class="service-item" data-desc="服务3的服务流程，从咨询到交付的全环节说明">Service 3</a></li>
    </ul>
</li>

2. 编写CSS样式 #

设置文本框的定位规则、初始隐藏状态和过渡动画：

/* 下拉菜单父元素设为相对定位，作为文本框的定位参照 */
#services-dropdown {
    position: relative;
}

/* 服务说明文本框容器 */
.service-tooltip {
    position: absolute;
    top: 0;
    left: 100%;
    width: 320px;
    height: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-left: none;
    padding: 18px;
    box-shadow: 3px 0 6px rgba(0,0,0,0.08);
    /* 初始状态：左移隐藏+透明 */
    transform: translateX(-25px);
    opacity: 0;
    visibility: hidden;
    /* 平滑过渡动画 */
    transition: all 0.3s ease;
    z-index: 1001; /* 层级高于Bootstrap默认下拉菜单（1000），避免被遮挡 */
}

/* 悬停时触发显示 */
#services-dropdown:hover .service-tooltip,
#services-dropdown .dropdown-menu:hover ~ .service-tooltip {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.tooltip-content p {
    margin: 0;
    color: #333;
    line-height: 1.5;
}

3. 添加jQuery交互逻辑 #

实现服务项切换时的文本更新，以及下拉菜单悬停自动展开的优化：

$(document).ready(function() {
    // 页面加载时默认显示第一个服务的说明
    var initDesc = $('.service-item:first').data('desc');
    $('.tooltip-content p').text(initDesc);

    // 监听服务项悬停，切换说明文本
    $('.service-item').hover(function() {
        var currentDesc = $(this).data('desc');
        $('.tooltip-content p').text(currentDesc);
    });

    // 优化：鼠标悬停下拉菜单时自动展开（替代点击触发）
    $('#services-dropdown').hover(function() {
        $(this).addClass('open');
    }, function() {
        $(this).removeClass('open');
    });
});

效果说明 #

• 鼠标悬停至Services菜单或下拉列表时，右侧文本框平滑滑入显示
• 鼠标切换不同服务项，文本框内容自动更新对应说明
• 鼠标离开菜单区域，文本框平滑滑出隐藏

注意事项 #

• 若需适配移动端，可通过媒体查询隐藏文本框，保留原有下拉交互
• 文本框的宽度、配色等样式可根据需求自由调整

内容的提问来源于stack exchange，提问作者R Walser