问题描述

我正在尝试使用自定义 HTML 模块、JCE 和 Protostar 将以下内容集成到 Joomla 3.8.11（全新安装）中。我尝试了几件事，包括使用 - jQuery(document).ready(function() {- 但不幸的是我无法让它工作。

有人可以帮我吗？非常感谢！

脚本：

    $(function(){
    $('.dragbox')
    .each(function(){
        $(this).hover(function(){
            $(this).find('h2').addClass('collapse');
        }, function(){
            $(this).find('h2').removeClass('collapse');
        })
        .find('h2').hover(function(){
            $(this).find('.configure').css('visibility', 'visible');
        }, function(){
            $(this).find('.configure').css('visibility', 'hidden');
        })
        .click(function(){
            $(this).siblings('.dragbox-content').toggle();
        })
        .end()
        .find('.configure').css('visibility', 'hidden');
    });
    $('.column').sortable({
        connectWith: '.column',
        handle: 'h2',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        stop: function(event, ui){
            $(ui.item).find('h2').click();
            var sortorder='';
            $('.column').each(function(){
                var itemorder=$(this).sortable('toArray');
                var columnId=$(this).attr('id');
                sortorder+=columnId+'='+itemorder.toString()+'&';
            });
            alert('SortOrder: '+sortorder);
            /*Pass sortorder variable to server using ajax to save state*/
        }
    })
    .disableSelection();
});

html

<div class="column" id="column1">
    <div class="dragbox" id="item1" >
        <h2>Handle 1</h2>
        <div class="dragbox-content" >
            <!-- Panel Content Here --> 
        </div>
    </div>
    <div class="dragbox" id="item2" >
        <h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
        <div class="dragbox-content" >
            <!-- Panel Content Here -->
        </div>
    </div>
    <div class="dragbox" id="item3" >
        <h2>Handle 3</h2>
        <div class="dragbox-content" >
            <!-- Panel Content Here -->
        </div>
    </div>
</div>
<div class="column" id="column2" >
    <div class="dragbox" id="item4" >
        <h2>Handle 4</h2>
        <div class="dragbox-content" >
            <!-- Panel Content Here-->
        </div>
    </div>
    <div class="dragbox" id="item5" >
        <h2>Handle 5</h2>
        <div class="dragbox-content" >
            <!--Panel Content Here--> 
        </div>
    </div>
</div>

它有一些CSS，但这不会引起任何问题。

标签： jqueryhtmljoomla

您是否在网页上引用 jQuery 文件。如果不放他的 jQuery CDN 链接：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

还要在浏览器的控制台中检查它是否有任何错误。为此，在chrome 浏览器中按F12 按钮，然后单击控制台选项卡。我认为在您的项目路径中找不到 jQuery。

jquery - joomla jQuery - 无法让 jQuery 工作

问题描述

解决方案

见下图：

推荐阅读