Javascript 如何使下拉按钮保持选中状态

基本上，我想做的只是让排序下拉按钮在你点击的任何一个按钮上保持选中状态。当你点击其中一个选项时，它总是返回到“全部”。下面是我的html、CSS和jquery，也可以在我的网站上看到ALL按钮的作用：

jQuery/Javascript：

$(document).ready(function($){  

    var nav = $("#catpicker");  

    nav.find("li").each(function() {  
        if ($(this).find("ul").length > 0) {    

            $(this).mouseenter(function() {  
                $(this).find("ul").stop(true, true).slideDown();  
            });  

            $(this).mouseleave(function() {  
                $(this).find("ul").stop(true, true).slideUp();  
            });  
        }  
    });

})(jQuery);

HTML:

试试这个

---

我明白了，伙计们，这很简单，只需要几行代码。有时候，这里的开发人员喜欢把事情弄得比我想象的更复杂。我喜欢遵循接吻公式，保持简单愚蠢：）

你能创建一个说明问题的例子吗你好，如果你访问该网站，你会看到我的意思：请参考以下内容：我建议更改HTMLunth的结构，但这不起作用。谢谢你的努力！如果你找到了答案，发布解决方案，让未来寻找类似解决方案的人在这里找到它，而不是死胡同。

<div class="sort">
<p>only show me :</p>
<nav id="catpicker">
    <ul>
        <li><a href="#" id="allcat" class="current"><img src="<?php bloginfo('template_directory'); ?>/images/all-btn-small.png" width="55px" height="55px" /></a>
            <ul>
                <li><a href="#" id="active" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/active-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="pending" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/pending-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="sold" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/sold-btn-small.png" width="55px" height="55px" /></a></li>
            </ul>
        </li>                   
    </ul>               
</nav>      

.sort nav#catpicker {
    float: left;
    position: relative;
    margin-top: 15px;
    z-index: 2;
}   

nav#catpicker ul ul { 
    display:none; 
    position:absolute; 
    left:0;
}  

nav#catpicker ul li { 
    background: #dcdbdb;
    padding: 10px;
}  

nav#catpicker ul ul li { 
    float:none;   
}

div class="sort">
<p>only show me :</p>
<nav id="catpicker">
       <a href="#" id="allcat" class="current"><img src="<?php bloginfo('template_directory'); ?>/images/all-btn-small.png" width="55px" height="55px" /></a>
                <li><a href="#" id="active" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/active-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="pending" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/pending-btn-small.png" width="55px" height="55px" /></a></li>
                <li><a href="#" id="sold" class="filter"><img src="<?php bloginfo('template_directory'); ?>/images/sold-btn-small.png" width="55px" height="55px" /></a></li>
        </li>                   
    </ul>               
</nav> 

.filter
{
display:none;
}

$(document).ready(function($){  

    $("#catpicker .current").mouseenter(function() {  
                $(".filter").stop(true, true).slideDown();  
            }); 
   $("#catpicker .current").mouseleave(function() {  
                $(".filter").stop(true, true).slideUp();  
            }); 
    $("#catpicker .filter").click(function() {  
                $(this).removeClass("filter").addClass("current");
            }); 

    });

})(jQuery);