Question

是否可以添加额外的jQuery来为这些标签添加一个添加的下拉菜单？

以下是添加了下拉菜单项的HTML：

            <div class="tabs">

                <ul class="tabs-nav">

                    <li><a href="#tab1">Tab 1</a></li>
                    <li><a href="#tab2" >Tab 2</a></li>
                    <li><a href="#tab3" >Tab 3</a>
                          <ul><!-- added drop-down items -->
                               <li><a href="#son-of-tab3" >drop-down 1</a></li> 
                               <li><a href="#son-of-tab3" >drop-down 2</a></li> 
                             <li><a href="#son-of-tab3" >drop-down 3</a></li> 
                            </ul>
                     </li><!-- end tab 3-->

                </ul>

                <div class="tabs-content">

                    <div id="tab1" class="content">
                        <!-- tab1 content -->
                    </div>

                    <div id="tab2" class="content">
                        <!-- tab2 content -->
                    </div>

                    <div id="tab3" class="content">
                        <!-- tab3 content -->
                    </div>

                </div> <!-- /tabs-content -->

            </div> <!-- /tabs -->

使标签工作但需要额外的东西以使下拉列表工作的jQuery？

            <script>
                $(document).ready(function() {

                    //add active class to the first li
                    $('.tabs-nav li:first').addClass('active');

                    //hide all content classes.
                    $('.content').hide();

                    //show only first div content
                    $('.content:first').show();

                    //add the click function
                    $('.tabs-nav li').click(function(){

                            //remove active class from previous li
                            $('.tabs-nav li').removeClass('active');

                            //add active class to the active li.
                            $(this).addClass('active');

                            //hide all content classes
                            $(".content").hide();

                            //find the href attribute of the active tab
                            var activeTab = $(this).find("a").attr("href");

                            //fade in the content of active tab
                            $(activeTab).fadeIn(1000);

                        return false;

                    });
                });
            </script>

我可以根据需要发布css

非常感谢，

Answer 1

.tabs li ul{
  position:absolute;
    left:0;
  display:none;
}

$(function(){
  var parentH = $('.tabs-nav li ul').parent().height();
  $('.tabs-nav li ul').css('top', parentH);
  $('.tabs-nav li').hover(function(){
    $('ul', this).show();
  }, function(){
    $('ul', this).hide();
  });
});

Working jsFiddle

带有下拉菜单的标签内容

1 个答案: