jquery slidetoggle（）不在Joomla中工作，但在不使用Joomla時工作

我使用slidetoggle函數來顯示/隱藏Joomla 3模板上的div。它不在joomla中工作，但它在Joomla之外使用時正在工作。jquery slidetoggle（）不在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命名空間而不是$，但是沒有做任何事情，所以我將它改回$。

來源

2014-10-20 Michele

好吧，首先，你並不需要使用下面的一切：

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

所有這些3系的導入的jQuery在noConflict模式。您可以刪除JHtml::_('jquery.framework');。

當你使用noConflict模式下，你需要用下面的更換你的jQuery：

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

正如你所看到的，我已經在全球範圍內使用jQuery，並通過$通過作爲別名。我也調整了點擊功能。

希望這會有所幫助

來源

2014-10-20 16:14:37 Lodder

哇。這工作！不夠感謝你，Lodder。我花了很長時間試圖弄清楚。 – Michele 2014-10-20 21:43:34

@Michele - 你非常歡迎。請接受回答，將其標記爲通過單擊左側的「打勾」圖標解決 – Lodder 2014-10-20 21:44:23

jquery slidetoggle（）不在Joomla中工作，但在不使用Joomla時工作

回答

相關問題