jquery slidetoggle() 在 Joomla 中不起作用，但在不使用 Joomla 时起作用答案

【问题标题】：jquery slidetoggle() not working in Joomla but works when not using Joomlajquery slidetoggle() 在 Joomla 中不起作用，但在不使用 Joomla 时起作用
【发布时间】：2014-10-20 16:07:27
【问题描述】：

我正在使用slidetoggle 函数来显示/隐藏 Joomla 3 模板上的 div。它在 joomla 中不起作用，但是当我在 Joomla 之外使用它时它正在起作用。

我读过jQuery slideToggle doesn't work on joomla, but works on jsbin

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

它在 Joomla working slidetoggle 之外工作，但当我把它放在模板的 index.php 文件中时却不行 non-working slidetoggle

在Joomla模板index.php中，我已经加载了jquery（1.10.2版本自带Joomla 3）和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 的位置。

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 文档use jQuery instead of $ doc 说要使用 jquery 命名空间而不是 $，但这没有任何作用，所以我将其改回 $。

【问题讨论】：

标签： jquery joomla slidetoggle

【解决方案1】：

您不需要使用以下全部：

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，并将$ 作为别名传递。我还调整了点击功能。

希望对你有帮助

【讨论】：