Jquery操作CSS兄弟节点和子节点,实现下拉特效和鼠标hover跟随特效

16. January 2017 HTML5 0

function show_jian(){ //紧挨着当前元素后面的兄弟元素
$(‘#lib_content1_nav’).find(“.lib_lib”).each(function(){
$(this).hover(function(){
$(this).next().css(‘display’,’block’);
},function(){
$(this).next().css(‘display’,’none’);
})
});
};

function show_down(){ 操作刷选的子节点
$(‘#lib_content2_left_text’).find(‘li’).each(function(){
$(this).hover(function(){
$(this).children(“div:last-child”).css(‘display’,’block’);
},function(){
$(this).children(“div:last-child”).css(‘display’,’none’);
})
});
};

———————————————————-HTML

<div id=”lib_content1_nav”> 兄弟节点跟随
<ul>
{pc:content action=”category” num=”6″ siteid=”$siteid” catid=”139″ order=”listorder ASC”}
{loop $data $r}
<li>
<div class=”lib_lib”>
<a href=”{$r[url]}” style=”color: #ffffff”> {$r[catname]}</a>
</div>
<div class=”lib_content1_nav_jian”><img src=”{IMG_PATH}lib/lib_jian.png”></div>
</li>
{/loop}
{/pc}
</ul>
</div>

<div id=”lib_content2_left_text”> 子节点下拉
<ul>
{pc:content action=”category” num=”6″ siteid=”$siteid” catid=”146″ order=”listorder ASC”}
{php $num=0}
{loop $data $r}
{php $num++}
<li> <div class=”lib_list_pic”>
<img src=”{$r[image]}”>
</div>
<div class=”lib_list_pic_child”>
<ul>
{pc:content action=”category” catid=”$r[‘catid’]” num=”4″ siteid=”$siteid” order=”listorder ASC”}
{loop $data $rr}
<li class=”lib_list_pic_child{$num}”>
<a href=”{$rr[url]}” style=”color: #ffffff”> {$rr[catname]}</a>
</li>
{/loop}
{/pc}
</ul>
</div>
</li>
{/loop}
{/pc}
</ul>
</div>

———————————————————-CSS

#lib_content1_nav{ 兄弟节点跟随
width: 780px;
height: 60px;
/*background-color: red;*/
margin-left: 200px;
}
#lib_content1_nav ul li {
display: block;
float: left;
font-size: 16px;
color: #FFFFFF;
font-family: ‘Microsoft YaHei’;
width: 90px;
height: 35px;
padding-top: 25px;
/*background-color: red;*/
}
.lib_content1_nav_jian{
width: 21px;
height: 10px;
margin-left: 20px;
display: none;
}

#lib_content2{ 子节点下拉
width: 1190px;
height: 480px;
margin-top: 20px;
}
#lib_content2_left{
width: 890px;
height: 480px;
float: left;
}
#lib_content2_left_pic{
width: 890px;
height: 301px;
}
#lib_content2_left_text{
width: 890px;
height: 154px;
margin-top: 5px;

}

.lib_list_pic{
width: 147px;
height: 154px;
float: left;
margin-left: 1px;
}
.lib_list_pic_child{
width: 147px;
height: 40px;
display: none;
margin-top: 154px;
z-index: 1;
position: relative;
}
#lib_content2_left_text li{
display: block;
float: left;
}
#lib_content2_right_line{
width: 100%;
height: 4px;
background-color: #5a7aea;
z-index: -1;
}


Leave a Reply

Your email address will not be published. Required fields are marked *