那么這樣的效果是如何實現的呢？我們還是分布來教一教大家吧：

第一步：找到導航分類搜索的地方，然后按照下面的格式添加，這里說明哈是：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的值！