Question

我添加了很多内容后，我的页面重载了我通过javascript调用contextmenu（righmenu），但是当它有很多内容页面加载时这么慢

这是我的JavaScript右键菜单：

<script>
    $(document).ready(function() {
        context.init({preventDoubleContext: false});


        context.attach('#ID', [
        {text: '<i class="el-icon-download-alt" style="color: #1AADC1"></i> &nbsp;&nbsp;Download', href: '#', extra: 'target="_blank"'},
        {divider: true},
        {text: '<i class="el-icon-link" style="color: #3CC8DB"></i> &nbsp;&nbsp;Export Link', href: '#link_ID', extra: 'class="popup-with-form"'},
        {text: '<i class="el-icon-share-alt" style="color: #3CC8DB"></i> &nbsp;&nbsp;Share', subMenu: [
        {text: '<i class="fa fa-envelope fa-lg" style="color: #009688"></i> &nbsp;&nbsp;Email', href: '#', target:'_blank', },
        {text: '<i class="fa fa-facebook fa-lg" style="color: #0D47A1"></i> &nbsp;&nbsp;Facebook', href: '#', target:'_blank', },
        {text: '<i class="fa fa-google-plus fa-lg" style="color: #F44336"></i> &nbsp;&nbsp;Google+', href: '#', target:'_blank', },
        {text: '<i class="fa fa-twitter fa-lg" style="color: #42A5F5"></i> &nbsp;&nbsp;Twitter', href: '#', target:'_blank', }
        ]}, 
        {divider: true},
        {text: '<i class="el-icon-remove" style="color: #DB3C4C"></i> &nbsp;&nbsp;Delete', href: '#del_ID', extra: 'class="modal-basic"'},
        {text: '<i class="el-icon-font" style="color: #3CDBAE"></i> &nbsp;&nbsp;Edit', href: '#', extra: 'class="simple-ajax-popup"'},
        {divider: true},
        {text: '<i class="el-icon-cog" style="color: #48A360"></i> &nbsp;&nbsp;Properties', href: '#info_ID', extra: 'class="popup-with-form"'},
    ]);

    context.settings({compress: true});
});
</script>

ID完全不同。

HTML code：

<div id="ID"  class="thumbnail">
    <label for="cID"><div class="thumb-preview">
    <a class="thumb-image" href="<TMPL_VAR img_preview>">
        <img src="#" class="img-responsive" alt="Project">
    </a>
    <div class="mg-thumb-options">
        <div class="mg-toolbar">
            <div class="mg-option checkbox-custom checkbox-inline">
                <input type="checkbox" name="demo" id="cID" value="ID">
                <label for="c<TMPL_VAR file_id>">SELECT</label>
            </div>
        </div>
    </label>
</div>
<h5 class="mg-title text-weight-semibold">Demo Test</h5>

所以我觉得如果我只有4或5个内容可以，但是我的网站速度慢了，我想只有一个下拉菜单，我不需要为所有HTML内容添加JavaScript代码的菜单。

Answer 1

不要将HTML代码放在jQuery函数中。而是使用jQuery来隐藏或显示下拉菜单。无需在其中添加HTML。把HTML用div重新包装起来。使用jQuery $(#id).show()/hide()显示/隐藏该div。

在需要时加载菜单

1 个答案: