Use jquery to show / hide menu in Drupal

Question

I have a ctools content type plugin with a template file with the following html in it:

<a id="blah">Click me</a>
<p class="green-button"><a href="#">Read the blog</a></p>
<ul class="buying-dropdown">

      <li class="first amazon"><a href="#">paperback</a></li>
      <li class="signed"><a href="#">Signed edition</a></li>
      <li class="kindle"><a href="#">kindle edition</a></li>
      <li class="hardback"><a href="#">hardback edition</a></li>
      <li class="last postcard"><a href="#">postcard edition</a></li>
</ul>

I am trying to simply show the ul on mouseover of the p button, maintain state for the duration of hovering over and selection of the different child li and then disappear on mouseout.

The javascript file is being called, as if I look in console then console is writing 'called'. However, my simple 'click me' button test isn't working. I have also tried to achieve the main goal (following this tutorial http://www.queness.com/preview/1047/easy-to-style-jquery-drop-down-menu-tutorial) with the menu, but it seems that my script isn't being called. Any help appreciated.

(function ($, Drupal, window, document, undefined) {
    console.log('called');
    $('#blah').click(function() { console.log('clickity click')});
    //when someone mouseovers the buy book button
    //the menu will show (it is hidden by default  
    //the menu will stay open whilst hovering over   
    //on mouseout the menu disappears
})(jQuery, Drupal, this, this.document);

what does the console tells you? i would try this jsfiddle.net/K6ZrT — optimisticupdate
– optimisticupdate, Commented Mar 24, 2013 at 10:20
The console says 'called', but not 'clickity click' as expected when I click #blah — weaveoftheride
– weaveoftheride, Commented Mar 24, 2013 at 12:33
I tried your fiddle, but the same is happening e.g. no 'clickity click' as expected when I click #blah — weaveoftheride
– weaveoftheride, Commented Mar 24, 2013 at 12:35

Community · Accepted Answer · 2017-05-23 10:25:50Z

1

This was the solution. Answered originally on Using JQuery in Drupal 7

  (function ($) {
    Drupal.behaviors.YOURTHEMENAME = {
    attach: function(context, settings) {

     console.log('called');
        $('#blah').click(function() { console.log('clickity click')});
        //when someone mouseovers the buy book button
        //the menu will show (it is hidden by default  
        //the menu will stay open whilst hovering over   
        //on mouseout the menu disappears
    }

    };
    })(jQuery);

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Mar 24, 2013 at 12:46

weaveoftheride

4,4139 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use jquery to show / hide menu in Drupal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related