Question

基本上我想要做的只是让你在点击的任何一个上选择排序下拉按钮。当您单击其中一个选项时，它总是返回“全部”。我的html，CSS和jquery也位于下方，请在我的网站上查看此处的所有操作按钮：http://fireflyliving.com/properties/

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：

<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>

CSS

.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;   
}

Answer 1

试试这个

＆LT;

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);

Answer 2

我把它想象成人，这很简单，只需几行代码。有时，这里的开发人员喜欢让事情变得比我应该更复杂。我喜欢遵循KISS公式，保持简单愚蠢：）

如何获得下拉按钮以保持选中状态

2 个答案: