0

基本上我想要做的只是让排序下拉按钮在你点击的任何一个上保持选中状态。当您单击其中一个选项时，它总是返回到“全部”。我的 html、CSS 和 jquery 也在下面查看我网站上的 ALL 按钮：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;   
}
4

2 回答 2

0

尝试这个

<

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);
于 2013-08-29T18:14:56.213 回答
-2

我想通了，这很容易，只需几行代码。有时这里的开发人员喜欢让事情变得比我应该做的更复杂。我喜欢遵循 ​​KISS 公式，保持简单愚蠢:)

于 2013-08-30T12:22:23.397 回答