Javascript 从下拉菜单中选择项目_Javascript_Jquery_Html_Css_Drop Down Menu

Javascript 从下拉菜单中选择项目

javascript jquery html css drop-down-menu

Javascript 从下拉菜单中选择项目,javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,我已经建立了一个css下拉菜单，当我从中选择和选项时，我希望它确保下拉菜单中的所选选项，但它显示相同的东西，不会改变。。。我在使用jQuery，我认为ul和li以及我的选择器必须是什么带来了混淆 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script> <title>&l

我已经建立了一个css下拉菜单，当我从中选择和选项时，我希望它确保下拉菜单中的所选选项，但它显示相同的东西，不会改变。。。我在使用jQuery，我认为ul和li以及我的选择器必须是什么带来了混淆

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>
    <title></title>

    <style>

.dropdown-menu {
    padding: 0;
    margin: 0;
    width: 130px;
    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>

<script>

$(document).ready(function(){

    $("#account").click(function () {

    alert($('.menu-item').val());

    });


</script>



<ul class = "dropdown-menu">
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="account">account</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="gametime">gametime</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="RPA">Cereal</a>
    </li>
    <li class = "menu-item">
        <a href = "#" class = "menu-item-link" id="workhard">workhard</a>
    </li>
    <li class = "active menu-item">
        <a href = "#" class = "menu-item-link" id="puppies">puppies</a>
    </li>            
</ul>
</select>

</body>
</html>

你必须这样做：

$(".dropdown-menu .menu-item a").click(function () {

    alert($(this).text());
     $(".menu-item").removeClass("active"); // remove active class from li tags
     $(this).closest("li").addClass("active"); // add active class to current clicked one

    });

单击li get的锚定标记时，其文本val仅适用于form和ul的输入元素，li和a不是输入元素。您必须使用文本获取其值，并将其显示为选中状态，将活动类添加到单击的元素中，然后从其他元素中移除

检查此项。我们对sme字段的id进行了一些更改。请查看它是否可以帮助您$document.readyfunction{ $。菜单项链接。单击，函数{ $.menu-item.removeClassactive； $+$this.text.closestli.addClassactive； }

};

谢谢！！有道理！！