1

It's based on this example from zurb foundation: http://foundation.zurb.com/docs/components/dropdown.html

    <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>

    <a href="#" data-dropdown="drop2">Has Content Dropdown</a>
     <ul id="drop2" class="f-dropdown content" 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: $( ".f-dropdown").attr('data-dropdown-content');

It doesn't work.

Could this be what's preventing the child menu from not showing up?

I also have this before body tag: 

         <script>
           $(document).foundation();
          </script>

This is the menu as it is so far: (got all the things inserted with the exception of this question) 

     <!-- Navigation -->
       <ul class="nav menu button-group">
        <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 -->

If you want further background of the question, though I don't think it necessarily pertains to this question, here's my earlier question today:How to add data-dropdown="drop1" in a menu

Community
  • 1
  • 1
user273072545345
  • 1,536
  • 2
  • 27
  • 57
  • Are you importing jQuery aleady? If so are there multiple libraries being imported that could cause conflicts? Have you tried calling the plugin using Joomla coding standards for inserting Javascript? Are there any errors in the console? – Lodder Nov 05 '13 at 21:35
  • @Lodder, um, yes, I'm importing jquery via this link: but, doesn't jQuery automatically have no conflict? – user273072545345 Nov 05 '13 at 21:38
  • No, Joomla doesn't automatically use no conflict mode, this is only possible in Joomla 3.x is you use the proper method as stated in one of my answers a while back: http://stackoverflow.com/questions/12471067/importing-jquery-into-joomla/12473933#12473933 – Lodder Nov 05 '13 at 21:42
  • @Lodder , I am using Joomla 3.x, and my template is custom, ie, all I'm calling so far are these: addStyleSheet('templates/' . $this->template . '/css/normalize.css'); $doc->addStyleSheet('templates/' . $this->template . '/css/foundation.css'); $doc->addScript('templates/' .$this->template. '/js/foundation.min.js'); $doc->addScript('templates/' .$this->template. '/js/foundation.dropdown.js'); ?> – user273072545345 Nov 05 '13 at 21:46

1 Answers1

1

If you are trying to use jQuery to add the data-dropdown-content attribute to elements:

$( ".f-dropdown").attr('data-dropdown-content'); is a getter function. You want to set the attribute. Try this:

$( ".f-dropdown").attr('data-dropdown-content', '');
Jason P
  • 26,984
  • 3
  • 31
  • 45
  • just tried your statement, and looked it in firebug, this is what it shows: data-dropdown-content="", should it come up with that? If you look at the example above, it's just "data-dropdown-content." – user273072545345 Nov 05 '13 at 21:42
  • In chrome, it shows as above. I think that's up to the browser. I assume the plugin is using a selector like `[data-dropdown-content]`, so either would work. – Jason P Nov 05 '13 at 21:44
  • you're right. Just checked in Chrome, and it shows as it is. In FF, with firebug, it shows otherwise. Hm. It's still not making my drop-down menu work. I wonder why ... is there something else I'm missing? – user273072545345 Nov 05 '13 at 21:48
  • no worries. as you've technically answered my question as I've written it out, it's probably up for another post. Hm. Not sure how to frame that question now. But thank you for your clear explanation why I had done it the wrong way. – user273072545345 Nov 05 '13 at 21:53