那么这样的效果是如何实现的呢？我们还是分布来教一教大家吧：

第一步：找到导航分类搜索的地方，然后按照下面的格式添加，这里说明哈是：data-id是指栏目的id，data-lid是指模型的lid；其他就没有什么要注意的了。

<div class="s-select"> <span class="select-hd"><i></i>攻略/游记</span>
<ul class="select-bd hide" style="z-index:99999">
<li class="abc dhy"><a href="javascript:;" data-id='1' data-lid='17'>攻略/游记</a></li>
<li class="abc "><a href="javascript:;" data-id='2' data-lid='18'>景点/风景</a></li>
<li class="abc "><a href="javascript:;" data-id='3' data-lid='19'>美食/餐厅</a></li>
<li class="abc "><a href="javascript:;" data-id='4' data-lid='20'>门票</a></li>
</ul>
</div>

第二：我们要用jquery来实现这样的效果，就是点击分类板块，能够成功切换并且能够成功替换相应的汉字，这里还是详细分析哈吧，万一有的同学没有接粗过jquery，还是看起来不太懂的。这里的.s-select都是上面的div里面的class样式，mouseenter（）和moueseleave()表示jquery里面的2个鼠标事件，线面的hide()和show()也是隐藏和显示时间，表示，选中某个属性，对应的地方显示隐藏。讲的有点粗糙，但是意思是这么个意思。在文档最后，我会把jquery中文手册附件给大家，供大家学习参考。

$(".s-select,.select-bd").mouseenter(function(e) {
$(".select-bd").show();
});
$(".s-select,.select-bd").mouseleave(function(e) {
$(".select-bd").hide();
});
$(".abc a").click(function(e) {
var neirong = $(this).html(); //这个是获取点击下拉框里面的文字
//alert(neirong);//neirong.show();
$(".select-hd ").html(neirong); //这个是把获取到的下拉框里面的文字重新给select-hd这个内容器里面去
});

第三步：想把法把下拉样式里面传的data-id以及data-lid的值获取到并且传到对应的搜索php文件里面去。

$(function(){
$(".s-select li").click(function(){
$(this).addClass("dhy").siblings().removeClass("dhy");
});
})

$(".s-select a").click(function(){
$("input[name='typeid']").val($(this).attr("data-id")); //获取到搜索表单里面下拉框中的typeid
$("input[name='lid']").val($(this).attr("data-lid")) //获取到搜索表单里面下拉框中的lid
});

$("a.s-button").click(function(){
$("#head-search-form").submit(); //这个在完成搜索提交搜索框框的时候，找到对应的表单
});
还有值得注意的是，我们要再搜索表单的开始部分添加上：<input type="hidden" name="typeid" value="1" /> 让我们的表单获取到对应的typeid的值！