织梦建站教程之分类导航搜索图一

那么这样的效果是如何实现的呢?

第一步:找到导航分类搜索的地方,然后按照下面的格式添加,这里说明哈是: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的值!