如何添加数据下拉列表="drop1"在菜单中 [英] How to add data-dropdown="drop1" in a menu

问题描述

我正在努力从Joomla CMS的zurb Foundation中实现一个下拉菜单.

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()设置/获取数据属性( +信息)

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

获取:

$('.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' );

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