Question

有人可以在下面的图片上为我提供这样的菜单吗？

我真的很感谢你的帮助。

单击电子邮件顶部时，菜单会向上扩展箭头，但默认情况下，如果未在电子邮件顶部单击鼠标，则箭头指向下方。

提前致谢和问候。

这里的代码几乎就在那里但需要在点击时进行，如果在点击后将鼠标移到它上面就不会消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.dropdown-menu {
    padding: 0;
    margin: 0;
    width: 30%;
    font-family: Arial;
    display: inline-table;
    position: relative;
    border: solid 1px #CCCCCC;
    border-bottom-style: none;
    background-color: #F4F4F4;
}
.dropdown-menu .menu-item {
    display: none;
}
.dropdown-menu .menu-item-link {
    display: table-cell;
    border-bottom: solid 1px #CCCCCC;
    text-decoration: none;
    color: rgba(89,87,87,0.9);
    height: 30px;
    padding: 5px;
    vertical-align: middle;
    cursor: pointer;
}
.dropdown-menu:hover .menu-item {
    border-bottom-style: solid;
}
.dropdown-menu .menu-item-link:hover {
    background-color: #DDDDDD;
}

.dropdown-menu:hover .menu-item {
    display: table-row;
}
.dropdown-menu .menu-item.active {
    display: table-header-group;
}
.dropdown-menu .menu-item.active .menu-item-link:after {
    width: 0; 
    height: 0; 
    content: "";
    position: absolute;
    top: 12px;
    right: 8px;
    border-top: 4px solid rgba(0, 0, 0, 1);     
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

}
</style>
</head>

<body>
<ul class = "dropdown-menu">
    <li class = "active menu-item">
        <a href = "#" class = "menu-item-link">myname@gmail.com</a>
    </li>     
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 1</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 2</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 3</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 4</a>
    </li>           
</ul>

</body>
</html>

Answer 1

有不同的方法来解决这个问题。您的代码在CSS悬停上运行，因此我编写了一个简单的jQuery代码，它通过应用不同的类来改变您在悬停时的箭头方向。

我已经为你的CSS添加了两个类，一个是向上箭头，另一个是箭头向下。除了添加这两个类并将活动菜单项更改为：

之外，我没有更改任何其他内容

<li class = "active menu-item">
    <a href = "#" class = "menu-item-link">myname@gmail.com <div class="arrow arrow-up"></div></a>
</li>

因此，正如您现在所看到的，您可以随时切换箭头div的类。

我建议的是;如果您尝试在单击时执行此操作，则必须在单击下拉菜单时重写CSS并应用类（或切换它们）。

如果您使用的是bootstrap;我，通常为此，上下使用字体真棒雪佛龙，只需切换我的<i></i>元素的类。

$('.dropdown-menu').click( function() {
    var arrow = $(this).find('i');
    // you can use .slideToggle() on your items to show them after click
    arrow .toggleClass('fa-chevron-up').toggleClass('fa-chevron-down');
});

无论如何，这是你的代码。你可以在这里试试。

＆＃13;

$('.dropdown-menu').hover( function() {
var arrow = $(this).find('.arrow');
 arrow.toggleClass('arrow-up').toggleClass('arrow-down');
});

＆＃13;

.dropdown-menu {
    padding: 0;
    margin: 0;
    width: 30%;
    font-family: Arial;
    display: inline-table;
    position: relative;
    border: solid 1px #CCCCCC;
    border-bottom-style: none;
    background-color: #F4F4F4;
}
.dropdown-menu .menu-item {
    display: none;
}
.dropdown-menu .menu-item-link {
    display: table-cell;
    border-bottom: solid 1px #CCCCCC;
    text-decoration: none;
    color: rgba(89,87,87,0.9);
    height: 30px;
    padding: 5px;
    vertical-align: middle;
    cursor: pointer;
}
.dropdown-menu:hover .menu-item {
    border-bottom-style: solid;
}
.dropdown-menu .menu-item-link:hover {
    background-color: #DDDDDD;
}

.dropdown-menu:hover .menu-item {
    display: table-row;
}
.dropdown-menu .menu-item.active {
    display: table-header-group;
}
.arrow-down {
    width: 0; 
    height: 0; 
    content: "";
    position: absolute;
    top: 12px;
    right: 8px;
    border-top: 4px solid rgba(0, 0, 0, 1);     
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

}
.arrow-up {
    width: 0; 
    height: 0; 
    content: "";
    position: absolute;
    top: 12px;
    right: 8px;
    border-bottom: 4px solid rgba(0, 0, 0, 1);     
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class = "dropdown-menu">
    <li class = "active menu-item">
        <a href = "#" class = "menu-item-link">myname@gmail.com <div class="arrow arrow-up"></div></a>
    </li>     
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 1</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 2</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 3</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link">Item 4</a>
    </li>           
</ul>

＆＃13;

下拉菜单类似于发布的图像

1 个答案: