jQuery加vue仿腾讯云下拉导航

<link rel="stylesheet" type="text/css" href="css/demo.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>

<div class="head-v3" id="index">
<div class="navigation-up">
<div class="navigation-inner">
    <div class="navigation-v3">
        <ul>
            <ul>
                <!-- 默认被选中项 -->
                <li :class="i.id == 1 ? 'nav-up-selected-inpage' : ''" v-for="i in nevigatelist" :_t_nav="i.nav">
                    <h2>
                        <a href="#">{{i.label}}</a>
                    </h2>
                </li>
            </ul>
        </ul>
    </div>
</div>
</div>
<div class="navigation-down">
<div v-for="i in navdetails" :id="i.id" :class="i.id == 'product' ? ['nav-down-menu','menu-1'] : ['nav-down-menu','menu-3','menu-1']" style="display: none;" :_t_nav="i.id">
    <div class="navigation-down-inner">
        <dl v-for="item in i.childrenlist" :style="item.id == '1' ? {'margin-left': i.leftlength}:''">
            <dt v-if="item.label !=''">{{item.label}}</dt>
            <dd v-for="y in item.hreflist">
                <a class="link" href="#">{{y.label}}</a>
            </dd>
        </dl>
    </div>
   
</div>
  </div>
     </div>

/* 导航标题 */
nevigatelist: [{
    id: '1',
    nav: 'home',
    label: '首页',
}, {
    id: '2',
    nav: 'product',
    label: '云产品',
}, {
    id: '3',
    nav: 'wechat',
    label: '微信建站',
}, {
    id: '4',
    nav: 'solution',
    label: '行业解决方案',
}, {
    id: '5',
    nav: 'cooperate',
    label: '合作伙伴',
}, {
    id: '6',
    nav: 'support',
    label: '帮助与支持',
}, ],