1

これらのタブにドロップダウン メニューを追加するために 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を投稿できます

どうもありがとう、

4

1 に答える 1

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();
  });
});

ワーキングjsFiddle

于 2012-07-26T13:45:28.307 に答える