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

问题描述

我正在使用slidetoggle函数在Joomla 3模板上显示/隐藏div.它无法在joomla中使用，但是当我在Joomla之外使用时可以使用.

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.

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

并将我的脚本放在页面底部，但这无济于事.

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

它在Joomla以外的地方工作正在滑动幻灯片，但是当我把它在模板的index.php文件中无效的幻灯片

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

在Joomla模板index.php中，我已经加载了jquery(Joomla 3随附的1.10.2版)和jqueryui

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');

我已插入:

<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>

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

in index.php where the div should display.

css是

#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 ;
}

它正在显示，我只是弄不清楚为什么它不会切换.我将所有'$'替换为'jquery'，因为Joomla docs 使用jQuery而不是$ doc 表示要使用jQuery名称空间而不是$，但是什么也没做，所以我将其改回$.

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 $.

推荐答案

您无需使用以下内容的 all :

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

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

所有这三行代码均以 noConflict 模式导入jQuery.

All 3 of these lines import jQuery in noConflict mode.

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

在使用noConflict模式时，需要用以下内容替换jQuery:

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');
        });
    });
});

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

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.

希望这会有所帮助

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