jquery - 创建一个向下钻取菜单-6ren

jquery - 创建一个向下钻取菜单

转载作者：太空狗更新时间：2023-10-29 14:59:34

25

4

<分区>

我有一个名为 subMenuRigth 的 div这个 div 在 <li> 里面我想要完成的是 div 出现在名为 subMenu 的 div 旁边我尝试了非常不同的方法来制作它，但它不起作用，它从不显示包含的内容。

这是我的html

<div id="menu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
    <label class="formatText" id="lblIndicators">Tal</label>
    <span class="ui-icon ui-icon-triangle-1-e menuIcon" style="float:right"></span>
    <div id="subMenu" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
        <ul class="options">
            <li>
                <label class="formatText">SubTal</label>
                <span class="ui-icon ui-icon-triangle-1-s" style="float:right"></span>
                <div id="subMenuRight" class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
                    <ul class=options>
                        <li>hi</li>
                        <li>bye</li>
                    </ul>
                </div>
            </li>
            <li>algo</li>
        </ul>
    </div>
</div>

这是我的 CSS

#menu
{
    width:150px;
}
#subMenu
{
    display:none;
    width:149px;
}

#subMenuRight
{
    display:none;
    width:150px;
    float:rigth;
}

我的 js

$(document).ready(initialize);

function initialize(){

    $("#menu").hover(mouseIn,mouseOut);
    $(".options li").hover(overOption,outOption);
    $(".subMenu").hover(openRigthMenu,closeRigthMenu);
}

function mouseIn(){
    $(this).find('span').attr('class','');
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-s');
    $("#subMenu").slideDown(100);
}

function mouseOut(){
    $(this).find('span').attr('class','');
    $(this).find('span').attr('class','ui-icon ui-icon-triangle-1-e');
    $("#subMenu").fadeOut(100);
}

function overOption(){
    $(this).attr('class','ui-state-hover ui-corner-all');
}

function outOption(){
    $(this).attr('class','');
}

function openRigthMenu(){
    $("#subMenuRight").css('display','block');
    $("#subMenuRight").css('outline','0');
    $("#subMenuRight").slideDown(100);
}

function closeRegithMenu(){
    $("#subMenuRight").slideUp(100);
}

My live demo

25

4

0

文章推荐： html - 简单的 2 列 div 布局

文章推荐： c - 从文件加载字体到 pango？

文章推荐： c - 指针、多维数组和地址

mysql - Apache 钻 - AssertionError : Relational expression
运行 apache-drill-1.14.0 在 mysql 上测试这个查询并在 0.02 秒内得到结果在 drill cli 中运行查询失败并出现 AssertionError 查询: produ
amazon-s3 - Apache 钻: table not found on s3 bucket
我是 Apache Drill 的新手。场景是这样的: 我有一个 S3 存储桶，我在其中放置了名为 test.csv 的 csv 文件。我已经按照官方网站的说明安装了 Apache Drill。
c++ - 在编程 : Principles and Practice using C++ (Stroustrup) 的第 4 章中使用 "cin"钻 #7 获得不同的结果
我正忙于学习第 2 版《编程:使用 C++ 的原理与实践》(Stroustrup)，并且在读取值时遇到了有无空格的问题，然后再次显示它们。能否请您指出正确的方向，以便我找出结果不同的原因？代码编译

首页

博学

6Ren·AI

商城

jquery - 创建一个向下钻取菜单