简体   繁体   中英

JQuery Menu Only Working on Homepage

Alright, this is a pretty simple.. maybe even stupid question. But I have been trying for a pretty long time to get this working properly and nothing has worked. I have a Menu that toggles with a plus / minus sign... this menu only works on the homepage though and nothing else. Here is the code:

$(document).ready(function(){   
$('.gh-gallink').toggle(
function() {
    $('.gallery_container').animate({
        marginTop: "x",
    }, 1000);
    $('.jquerycssmenu ul li ul').animate({
        marginTop: "x",
    }, 100);
    $('.jquerycssmenu ul li ul li a').animate({
    height: "x",
    }, 100);
    $('#main').animate({
        marginTop: "x",
    }, 1000);
    $(this).text('+');


}, function() {
    $('.gallery_container').animate({
        marginTop: "x",
    }, 1000);
    $('.jquerycssmenu ul li ul').animate({
        marginTop: "x",
    }, 100);
    $('.jquerycssmenu ul li ul li a').animate({
        height: "x",
    }, 100);
    $('#main').animate({
        marginTop: "x",
    }, 1000);
    $(this).text('-');

});
});

The menu works fine, but again.. only on the mainpage. And of course I don't have the x's in my actual code. But anways, the code is in the header.php file of my site and again, it only works on the homepage of my site. I tried changing the "$(document)" to "jQuery(Document)" and I also deactivated all my plugins too, but the menu still only works on the home page.

And also, here is the html that displays the toggle button:

<div class="gallerylink">
<a href="#" class="gh-gallink">
    -
</a>
</div>

Any help would be appreciated! :)

Edit:

I did what Chipmunk said and one by one got rid of each script in my header. I found out that when I removed this script (listed below) that scrolls up the page to an achor, everything works fine. However, I would still like to have both scripts running at the same time. Here is the anchor scrolling script.

// When the Document Object Model is ready
jQuery(document).ready(function(){
    // 'catTopPosition' is the amount of pixels #invisiblebox
    // is from the top of the document
    var catTopPosition = jQuery('#invisiblebox').offset().top;

    // When #scroll is clicked
    jQuery('#scroll, #scrolls').click(function(){
        // Scroll down to 'catTopPosition'
        jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
        // Stop the link from acting like a normal anchor link
        return false;
    });
});

So when you click on #scrolls, or #scroll.. it scrolls back up to the anchr "#invisiblebox". I don't know why this doesn't work with my toggle menu. If anyone has a solution to get both scripts running, please let me know.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM