javascript - 如何在悬停时添加侧边菜单

Question

我想将侧边菜单添加到子菜单中，例如 PRODUCT 1、PRODUCT 2 等，这些子菜单在悬停时出现在它们的侧面。我如何在以下代码中执行此操作？

这是我目前的代码。

CSS:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600, 300);
 @charset"UTF-8";

/* Base Styles */
 #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    position: relative;
}
#cssmenu a {
    line-height: 1.3;
}
#cssmenu {
    width: 300px;
    margin-left: 90px;
    background: #A3FFFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 3px;
    padding: 3px;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
    margin: 0 0 3px 0;
}
#cssmenu > ul > li:last-child {
    margin: 0;
}
#cssmenu > ul > li > a {
    font-size: 15px;
    display: block;
    color: #ffffff;
    text-shadow: 0 1px 1px #000;
    background: #A3FFFF;
    background: -moz-linear-gradient(#565656 0%, #323232 100%);
    background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
    background: -webkit-linear-gradient(#565656 0%, #323232 100%);
    background: linear-gradient(#565656 0%, #323232 100%);
    border: 1px solid #000;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
#cssmenu > ul > li > a > span {
    display: block;
    border: 1px solid #666666;
    padding: 6px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-weight: bold;
}
#cssmenu > ul > li > a:hover {
    text-decoration: none;
    font-weight: bold;
}
#cssmenu > ul > li.active {
    border-bottom: none;
}
#cssmenu > ul > li.active > a {
    background: #47A3FF;
    background: -moz-linear-gradient(#47A3FF 0%, #47A3FF 100%);
    background: -webkit-gradient (linear, left top, left bottom, color-stop(0%, #47A3FF), color-stop(100%, #47A3FF));
    background: -webkit-linear-gradient(#47A3FF 0%, #47A3FF 100%);
    background: linear-gradient(#47A3FF 0%, #47A3FF 100%);
    color: #fff;
    text-shadow: 0 1px 1px #fff;
    border: 1px solid #47A3FF;
}
#cssmenu > ul > li.active > a span {
    border: 1px solid #47A3FF;
}
#cssmenu > ul > li.has-sub > a span {
    background: url(images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has -sub.active > a span {
    background: url(images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
 #cssmenu ul ul {
    padding: 5px 12px;
    display: none;
}
#cssmenu ul ul li {
    padding: 3px 0;
}
#cssmenu ul ul a {
    display: block;
    color: #191975;
    font-size: 13px;
    font-weight: bold;
}
#cssmenu ul ul a:hover {
    color: cornflowerblue;
    font-weight:bold;
}

JS:

(function ($) {
    $(document).ready(function () {
        $('#cssmenu > ul > li > a').click(function () {
            $('#cssmenu li').removeClass('active');
            $(this).closest('li').addClass('active');
            var checkElement = $(this).next();
            if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                $(this).closest('li').removeClass('active');
                checkElement.slideUp('normal');
            }
            if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#cssmenu ul ul:visible').slideUp('normal');
                checkElement.slideDown('normal');
            }
            if ($(this).closest('li').find('ul').children().length == 0) {
                return true;
            } else {
                return false;
            }
        });
    });
})(jQuery);

HTML:

<div id='cssmenu'>
    <ul>
        <li class='has-sub'>
            <a href='#'><span>CENTRAL COMPLIANCE</span></a>
            <ul>
                <li><a href='#'><span>PRODUCT 1</span></a></li>
                <hr>
                <li><a href='#'><span>PRODUCT 2</span></a></li>
                <hr>
                <li><a href='#'><span>PRODUCT 3</span></a></li>
                <hr>
                <li><a href='#'><span>PRODUCT 4</span></a></li>
                <hr>
                <li><a href='#'><span>GEPOC</span></a></li>
                <hr>
                <li><a href='#'><span>Global Registration</span></a></li>
                <hr>
                <li><a href='#'><span>MBL</span></a></li>
                <hr>
                <li><a href='#'><span>Account Affirmations</span></a></li>
                <hr>
                <li class='last'><a href='#'><span>Outside Affiliations</span></a></li>
            </ul>
        </li>
        <li class='has-sub'>
            <a href='#'><span>CONTROL ROOM</span></a>
            <ul>
                <li><a href='#'><span>CDS</span></a></li>
                <hr>
                <li><a href='#'><span>UK Registration</span></a></li>
                <hr>
                <li class='last'><a href='#'><span>Compliance Portal</span></a></li>
            </ul>
        </li>
        <li class='has-sub'>
            <a href='#'><span>LARGE HOLDINGS</span></a>
            <ul>
                <li class='last'><a href='#'><span>LHO</span></a></li>
            </ul>
        </li>
        <li class='has-sub'>
            <a href='#'><span>ORCHESTRIA</span></a>
            <ul>
                <li class='last'><a href='#'><span>Orchestria</span></a></li>
            </ul>
        </li>
    </ul>
</div>

请帮我编辑这段代码。谢谢。

Answer 1

css 属性 :hover 应该可以正常工作。从一个没有显示的 div 开始。然后悬停在产品 1 上，例如，更改为显示 block 。

.side-menu {
  display:none;
}
.product1:hover > .side-menu {
  display:block;
}

重要的是要注意，这仅在要隐藏和显示的菜单项是您悬停在其上的元素的子项时才有效。这对您来说应该不是问题。

编辑澄清:在您的 HTML 中添加将包含您的侧边菜单的 ul。为 ul 分配一个类。这就是创建嵌套列表的方式。还要给 li 产品 1 添加一个类，以便我们可以选择它。

<li><a href="#" class="product1">Product1</a></li>
  <ul class="side-menu">
    <li>first sub menu item</ul>
  </ul>
</li>

现在你的CSS。它将与我上面写的一样，因为我使用了相同的类名。发生的情况是，当页面加载时，侧面菜单将被隐藏，因为显示设置为无。当您将鼠标悬停在类为“product1”的 html 元素上时，它会将侧边菜单的显示属性从无更改为阻止。

您仍然需要适本地放置新菜单项。