如何添加 data-dropdown="drop1";在菜单中 [英] How to add data-dropdown="drop1" in a menu

问题描述

我正在努力在 Joomla CMS 中实现来自 zurb 基金会的下拉菜单.

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

但是，我在添加 data-dropdown="drop1" 时遇到问题，因为我不知道插入它的正确方法.

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?

这是我正在谈论的示例页面:http://foundation.zurb.com/docs/components/dropdown.html

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>

我试过了:

$( ".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

显然，jQuery 不是我的强项.

Clearly, jQuery is not my strongest forte.

通过 jQuery 添加它的正确方法是什么?

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.

编辑

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

推荐答案

您可以使用 .data() (+信息)

获取:

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

设置:

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

所以在这种情况下，如果我理解正确(也许选择器是 .programs ul):

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

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

-编辑-

看起来您应该编辑实际的 html 代码(因为您可能在下拉脚本初始化后设置了它)，但您可以试试这个:

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' );

这篇关于如何添加 data-dropdown="drop1";在菜单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！