怎么用jq通过div控制多个相同类的div的样式

发布于
2016-08-18

新手上路，请多包涵

怎么用jquery通过div控制多个相同类的div的样式，鼠标一上去改变样式，二级菜单显示，其他的二级菜单收起

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/font-awesome-4.6.3/css/font-awesome.min.css" />
    <style type="text/css">
    *{
        margin: 0;
        padding: 0; 
    }
    .container{
        margin: 30px auto 0 auto;
        width: 300px;
    }
    .container a,.container a:link{
        text-decoration: none;
    }
    .vtitle{
        width: 100%;
        height: 50px;
        line-height: 50px;
        background-color: #63CEB5;
        color: #ffffff;
        font-size: 18px;
        padding-left: 20px;
    }
    .vtitle:hover{
        background-color: #1CA664; 
    }
    .vtitle i{
        float: right;
        padding: 10px 20px;
        font-size: 30px;
    }
    .vcon{
        display: none;
        width: 320px;
    }
    .vcon ul{
        list-style: none;
    }
    .vcon ul li{
        width: 100%;
        height: 45px;
        background-color: #F7EA95;
        color: #ffffff;
        line-height: 45px;
        font-size: 16px;
        border-bottom: 1px solid #DCDCDC;
    }
    .vcon ul li p{
        margin-left: 20px;
    }
    .vcon ul li:hover{
        background: #D6791C;
    }
    .vconshow{
        display: block;
    }
    </style>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="container">
        <a href="#"><div class="vtitle">下拉菜单1<i class="fa fa-angle-down" aria-hidden="true"></i></div></a>
        <div class="vcon vconshow">
            <ul>
                <li><p>我是he</p></li>
                <li><p>点我吧</p></li>
                <li><p>哈哈哈哈</p></li>
                <li><p>好吧汗</p></li>
            </ul>
        </div>
        <a href="#"><div class="vtitle">下拉菜单2<i class="fa fa-angle-right" aria-hidden="true"></i></div></a>
        <div class="vcon">
            <ul>
                <li><p>你是sb</p></li>
                <li><p>我怕不是</p></li>
                <li><p>你就是</p></li>
                <li><p>好笑吗</p></li>
            </ul>
        </div>
        <a href="#"><div class="vtitle">下拉菜单3<i class="fa fa-angle-right" aria-hidden="true"></i></div></a>
        <div class="vcon">
            <ul>
                <li><p>哈哈哈哈</p></li>
                <li><p>我就是逗比</p></li>
                <li><p>随你吧</p></li>
                <li><p>好了</p></li>
            </ul>
        </div>
        <a href="#"><div class="vtitle">下拉菜单4<i class="fa fa-angle-right" aria-hidden="true"></i></div></a>
        <div class="vcon">
            <ul>
                <li><p>正经点</p></li>
                <li><p>来了</p></li>
                <li><p>我要放大招</p></li>
                <li><p>等着</p></li>
            </ul>
        </div>
    </div>
</body>

</html>

javascript css html

阅读 4.4k

2 个回答

scort

你这完全使用css伪类就能实现了，为什么要用js呢？

<!DOCTYPE html>
<html lang="en">
<head>

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/font-awesome-4.6.3/css/font-awesome.min.css" />
    <style type="text/css">
    *{
        margin: 0;
        padding: 0; 
    }
    .container{
        margin: 30px auto 0 auto;
        width: 300px;
    }
    .container a,.container a:link{
        text-decoration: none;
    }
    .vtitle{
        width: 100%;
        line-height: 50px;
        background-color: #63CEB5;
        color: #ffffff;
        font-size: 18px;
        padding-left: 20px;
    }
    .vtitle:hover{
        background-color: #1CA664; 
    }
    .vtitle i{
        float: right;
        padding: 10px 20px;
        font-size: 30px;
    }
    .vcon{
        display: none;
        width: 320px;
    }
    .vcon ul{
        list-style: none;
    }
    .vcon ul li{
        width: 100%;
        height: 45px;
        background-color: #F7EA95;
        color: #ffffff;
        line-height: 45px;
        font-size: 16px;
        border-bottom: 1px solid #DCDCDC;
    }
    .vcon ul li p{
        margin-left: 20px;
    }
    .vcon ul li:hover{
        background: #D6791C;
    }
    .vconshow{
        display: block;
    }

    .vtitle:hover .vcon{
        display:block;

    }
    </style>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <div class="container">
        <a href="#"><div class="vtitle">下拉菜单1<i class="fa fa-angle-down" aria-hidden="true"></i>
            <div class="vcon">
                <ul>
                    <li><p>我是he</p></li>
                    <li><p>点我吧</p></li>
                    <li><p>哈哈哈哈</p></li>
                    <li><p>好吧汗</p></li>
                </ul>
            </div>

        </div></a>
        
        <a href="#"><div class="vtitle">下拉菜单2<i class="fa fa-angle-right" aria-hidden="true"></i></div></a>
        <div class="vcon">
            <ul>
                <li><p>你是sb</p></li>
                <li><p>我怕不是</p></li>
                <li><p>你就是</p></li>
                <li><p>好笑吗</p></li>
            </ul>
        </div>
        <a href="#"><div class="vtitle">下拉菜单3<i class="fa fa-angle-right" aria-hidden="true"></i></div></a>
        <div class="vcon">
            <ul>
                <li><p>哈哈哈哈</p></li>
                <li><p>我就是逗比</p></li>
                <li><p>随你吧</p></li>
                <li><p>好了</p></li>
            </ul>
        </div>
        <a href="#"><div class="vtitle">下拉菜单4<i class="fa fa-angle-right" aria-hidden="true"></i></div></a>
        <div class="vcon">
            <ul>
                <li><p>正经点</p></li>
                <li><p>来了</p></li>
                <li><p>我要放大招</p></li>
                <li><p>等着</p></li>
            </ul>
        </div>
    </div>
</body>

你自己在调调

江爱笛生

583

发布于
2016-08-18

var Vcon=$(".vcon");
Vcon.hover(
function(){
Vcon.siblings().children("ul").css("display","none");
this.children("ul").css("display","block");
},function(){
this.children("ul").css("display","none");
})

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

怎么用jq通过div控制多个相同类的div的样式

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

css布局怎么保证右边一直在可视范围内？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

如何实现一个深拷贝函数？

CSS如何巧妙实现标题居中、关闭按钮居右效果？