将html布局传输到joomla模板javascript中不起作用

Question

I created a website layout through my basic notepad editor and the code works as a standalone html page. I tried transferring it to a joomla template, but the javascript code just isn't working. It's for a menu that is mobile responsive.

Here's the javescript code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".nav-button").click(function () {
    $(".nav-button,.primary-nav").toggleClass("open");
    });    
});
</script>

Is there a special way I need to format it for the joomla template?

I tried putting it in a .js file (js/main.js) that had this:

$(document).ready(function(){
    $(".nav-button").click(function () {
    $(".nav-button,.primary-nav").toggleClass("open");
    });    
});

and then putting in the index.php file (I found this code from a similar question)

<?php 
defined( '_JEXEC' ) or die; 

$app             = JFactory::getApplication();
$doc             = JFactory::getDocument();
$user            = JFactory::getUser();
$this->language  = $doc->language;
$this->direction = $doc->direction;

//Load jQuery using Joomla's built in method
JHtml::_('jquery.framework');

// Define the template path
$template_path = 'templates/'  .$this->template;

// Le Javascript
$doc->addScript($template_path . '/js/main.js');

?>

It's still not working. I would prefer to use the inline javascript code anyway, but really I just want it to work. What do I need to add to the javascript code to make it work?

Answer 1

Please try to add your javascript using the following code:

JHtml::_('jquery.framework');
$doc->addScriptDeclaration('
    jQuery(document).ready(function(){
        jQuery(".nav-button").click(function () {
        jQuery(".nav-button, .primary-nav").toggleClass("open");
        });    
    });
');    

Note: Joomla loads jquery in noConflict mode so you have to change $ with jQuery in your jquery calls.

Reference: jQuery.noConflict()