Question

我正在使用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 ;
}

它的显示，我只是无法弄清楚它为什么不能切换。我替换了所有＆＃39; $＆＃39;与＆＃39; jquery＆＃39;因为Joomla docs use jQuery instead of $ doc说使用jquery命名空间而不是$，但是没有做任何事情，所以我把它改回$。

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

希望这有帮助

jquery slidetoggle（）在Joomla中不起作用，但在不使用Joomla时起作用

1 个答案: