0

I am working to implement a drop-down menu from zurb foundation in Joomla CMS.

However, I am having trouble adding data-dropdown="drop1" because I don't know the right way to insert it.

What's the best way to insert it in a anchor?

Here's the page of the example I'm talking about: http://foundation.zurb.com/docs/components/dropdown.html

Here's the example I'm referring from the page above: 

    <a href="#" data-dropdown="drop1">Has Dropdown</a>
      <ul id="drop1" class="f-dropdown" data-dropdown-content>
        <li><a href="#">This is a link</a></li>
        <li><a href="#">This is another</a></li>
        <li><a href="#">Yet another</a></li>
      </ul>

I've tried:

$( ".programs" ).append( $( 'data-dropdown="drop1"' ) );

$( ".programs" ).wrap( 'data-dropdown="drop1"' );

Also, to clarify when I do either one, it doesn't show up in source code

Clearly, jQuery is not my strongest forte.

What's the proper and right way via jQuery to add it?

Let me know if my question is not clear.

Any help would be appreciated as I've been tearing my hair out ... a lot.

EDIT

             <!-- Navigation -->
               <ul class="nav menu">
                 <li class="item-101 current active">
                       <a href="/social/services/" >Home</a>
                 </li>
                 <li class="item-106 deeper parent">
                       <a class="programs" href="/social/services/index.php/programs-services" >Programs &amp; Services</a>
                      <ul class="nav-child unstyled small">
                          <li class="item-107">
                            <a href="/social/services/index.php/programs-services/child-services-link-example" >Child Services Link Example</a>
                         </li>
                     </ul>
                </li>
             <li class="item-108">
                <a href="/social/services/index.php/featured-articles-news" >Featured Articles &amp; News</a>
           </li>
            <li class="item-109">
                <a href="/social/services/index.php/resources" >Resources</a></li>
            <li class="item-110"><a href="/social/services/index.php/donate" >Donate</a></li>
           <li class="item-111"><a href="/social/services/index.php/contact-us" >Contact Us</a></li></ul>

  <!-- End Navigation -->
user273072545345
  • 1,536
  • 2
  • 27
  • 57

1 Answers1

0

You can set/get the data attribute using .data() (+info)

Get:

$('.selector').data('dropdown');

Set:

$('.selector').data('dropdown','value');

So in this case, if I understood right (maybe selector is .programs ul):

$( ".programs" ).data( 'dropdown','drop1' );

-EDIT-

It looks like you should edit the actuall html code (because maybe you set it after the dropdown script is initialised), but you can try this:

$('.f-dropdown').prev('a').data( 'dropdown','drop1' );
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378
  • Um, question, using your example, should it show up via source code? Because it's not. Selector isn't actually ul, but a (it's a parent link) as in the example above. – user273072545345 Nov 05 '13 at 19:49
  • Via source-code no, because any js DOM changes happen once the source-code is generated, any way, you can inspect the current DOM using tools like firebug (for firefox) or the inspector (for chrome) by right-clicking on the element, By the way; wich is the element you want to set the data attribute to? – Toni Michel Caubet Nov 05 '13 at 19:54
  • it doesn't show up via firebug either. Hm. I'm trying to set it to anchor link that's a parent to drop-down menu. As in the example above, do you see data-dropdown attached to the a link? It's the same thing that I'm trying to do. Is that clear? Please let me know if not. – user273072545345 Nov 05 '13 at 20:00
  • I can't edit the actual code as it won't come through. Hm. Just tried your latest update, it didn't work. I've edited my post above to show the links. Can you see the one with .program class? That's the one I'm trying to add the data attribute to. – user273072545345 Nov 05 '13 at 20:12
  • So as my initial anser, it should be: `$( ".programs" ).data( 'dropdown','drop1' );` alternatly you can try `$( ".programs" ).attr( 'data-dropdown','drop1' );` – Toni Michel Caubet Nov 05 '13 at 20:14
  • oh my gosh! it finally showed up when I used the attr one! Thank you! I have another question related to this same link, but it would be unfair to pose it to you so, I'll create another post. Thank you! – user273072545345 Nov 05 '13 at 20:18