jquery slidetoggle() 在 Joomla 中不起作用，但在不使用 Joomla 时起作用 [英] jquery slidetoggle() not working in Joomla but works when not using Joomla

问题描述

我正在使用 slidetoggle 功能在 Joomla 3 模板上显示/隐藏 div.它在 joomla 中不起作用，但当我在 Joomla 之外使用它时它起作用了.

我读了 jQuery slideToggle 不起作用joomla，但适用于 jsbin

并将我的脚本放在页面底部，但这没有帮助.

它在 Joomla 之外工作 工作幻灯片 但当我把它在模板的 index.php 文件中 non-working slidetoggle

在 Joomla 模板 index.php 中，我加载了 jquery(1.10.2 版带有 Joomla 3)和 jqueryui

//添加 JavaScript 框架JHtml::_('bootstrap.framework');JHtml::_('jquery.framework');JHtml::_('jquery.ui');

我已插入:

<div id="showHideDiv">欢迎使用面子书.</div><i id="divtoggle" class="slideit"></i>
<script type="text/javascript">$(document).ready(function(){$( "#divtoggle" ).click(function() {$( "#showHideDiv" ).slideToggle( "slow", function() {//动画完成.$("#divtoggle" ).toggleClass('down')});});});

在 index.php 中应该显示 div 的位置.

css是

#showHideDiv{颜色:#fff;背景色:#47639E；填充:10px；}.toggal 容器{宽度:100%}.slideit {光标:指针；填充:10px；位置:绝对；右:25px；文本对齐:居中；顶部:8px；背景图片:网址(../light.png")；背景重复:不重复；}.向上{}.向下{背景位置:-63px 0 ;}

它正在显示，我就是不明白为什么它不会切换.我用 'jquery' 替换了所有的 '$'，因为 Joomla 文档 使用 jQuery 而不是 $ doc 说要使用jquery 命名空间而不是 $，但这没有任何作用，所以我将其改回 $.

解决方案

您不需要使用以下全部:

JHtml::_('bootstrap.framework');JHtml::_('jquery.framework');JHtml::_('jquery.ui');

所有这 3 行都以 noConflict 模式导入 jQuery.

您可以删除JHtml::_('jquery.framework');.

当您使用 noConflict 模式时，您需要将 jQuery 替换为以下内容:

jQuery(document).ready(function($){$("#divtoggle").on('click', function() {$("#showHideDiv").slideToggle("slow", function() {$('#divtoggle').toggleClass('down');});});});

如您所见，我在全局范围内使用了 jQuery，并将 $ 作为别名传递.我还调整了点击功能.

希望能帮到你

I am using the slidetoggle function to show/hide a div on a Joomla 3 template. It is not working in joomla but it is working when I use it outside of Joomla.

I read jQuery slideToggle doesn't work on joomla, but works on jsbin

and put my script at the bottom of the page but that didn't help.

It works here outside of Joomla working slidetoggle but not when I put it in the template's index.php file non-working slidetoggle

In the Joomla template index.php, I have loaded jquery (version 1.10.2 comes with Joomla 3) and jqueryui

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');

I've inserted:

<div class="toggalcontainer">
    <div id="showHideDiv">Welcome To FaceBook.</div>
    <i id="divtoggle" class="slideit"></i>
</div>

<script type="text/javascript">   
$(document).ready(function(){    
    $( "#divtoggle" ).click(function() {
      $( "#showHideDiv" ).slideToggle( "slow", function() {
        // Animation complete.
        $("#divtoggle" ).toggleClass('down')

      });
    });
});
</script>

in index.php where the div should display.

The css is

#showHideDiv{
    color: #fff;
    background-color:#47639E;
    padding:10px;

}
.toggalcontainer{
    width:100%
} 
.slideit {
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 25px;
    text-align: center;
    top: 8px;
    background-image: url("../light.png");
    background-repeat: no-repeat;
}
.up{

}
.down{
  background-position: -63px 0 ;
}

It's displaying, I just can't figure out why it won't toggle. I replaced all '$' with 'jquery' because Joomla docs use jQuery instead of $ doc says to use jquery namespace instead of $, but that did nothing so I changed it back to $.

解决方案

You do not need to use the all of the following:

JHtml::_('bootstrap.framework');
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');

All 3 of these lines import jQuery in noConflict mode.

You can remove JHtml::_('jquery.framework');.

As you're using noConflict mode, you need to replace your jQuery with the following:

jQuery(document).ready(function($){    
    $("#divtoggle").on('click', function() {
        $("#showHideDiv").slideToggle("slow", function() {
            $('#divtoggle').toggleClass('down');
        });
    });
});

As you can see, I have used jQuery in the global scope, and passed $ through as an alias. I've also tweaked the click function.

Hope this helps

这篇关于jquery slidetoggle() 在 Joomla 中不起作用，但在不使用 Joomla 时起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！