Wie füge ich ein Dropdown-Menü zu einem Tab-Menü hinzu

Question

Ich habe eine Seite, die ein Tab-System verwendet, um den Inhalt zu organisieren. Dazu habe ich das jQuery-Plugin 'Tabify' verwendet (Code unten).

Was ich jetzt tun muss, ist ein Dropdown-Menü zu einer der Registerkarten hinzufügen, so dass ich Unterabschnitte dieser Registerkarte haben kann.

Das Problem ist, dass das Tab-Skript scheint nur auf direkte Kinder des UL-Elements zu arbeiten, was bedeutet, dass meine zusätzlichen UL-und LI-Elemente für mein Dropdown-Menü sehr seltsam verhalten.

See this example (code below)

ich ein wenig jQuery aber um den Code zu arbeiten Skript Bearbeitung verwalten kann, ist mir traurig.

Wer weiß, wie ich das zum Funktionieren bringen könnte?

Vielen Dank im Voraus,

Tom

HTML:

<!-- TABS --> 
<div class="container"> 
    <ul id="tab-menu"> 
     <li class="active"><a href="#tab1">Tab 1</a></li>{/if} 
     <li> 
      <a href="#tab2">Tab 2</a> 
      <ul class="sub_sub_menu"> 
       <li><a href="#dropdown1">Overview</a></li> 
       <li><a href="#dropdown2">Floorplans</a></li> 
       <li><a href="#dropdown3">Specifications</a></li> 
      </ul> 
     </li> 
     <li><a href="#tab3">Tab 3</a></li> 
     <li><a href="#tab4">Tab 4</a></li> 
    </ul> 
</div> 

<!-- CONTENT --> 
<div class="container"> 
    <div id="tab1"> 
     <p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
    </div> 
    <div id="tab2"> 
     <div id="dropdown1"> 
      <p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
     </div> 
     <div id="dropdown2"> 
      <p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
     </div> 
     <div id="dropdown3"> 
      <p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
     </div> 
    </div> 
    <div id="tab3"> 
     <p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
    </div> 
    <div id="tab4"> 
     <p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
    </div> 
</div> 

JS:

(function(a) { 
    a.fn.extend({ 
     tabify: function(e) { 
      function c(b) { 
       hash = a(b).find("a").attr("href"); 
       return hash = hash.substring(0, hash.length - 4) 
      } 

      function f(b) { 
       a(b).addClass("active"); 
       a(c(b)).show(); 
       a(b).siblings("li").each(function() { 
        a(this).removeClass("active"); 
        a(c(this)).hide() 
       }) 
      } 
      return this.each(function() { 
       function b() { 
        location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent()) 
       } 
       var d = this, 
        g = { 
         ul: a(d) 
        }; 
       a(this).find("li a").each(function() { 
        a(this).attr("href", a(this).attr("href") + "-tab") 
       }); 
       location.hash && b(); 
       setInterval(b, 100); 
       a(this).find("li").each(function() { 
        a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide() 
       }); 
       e && e(g) 
      }) 
     } 
    }) 
})(jQuery); 

$(document).ready(function($){ 
    $("#tab-menu").tabify(); 
}); 

Answer 1

Hre ist eine Demo für die, die ich reden bin Du brauchst es nicht jede JavaScript für diese Anrufe zu machen, alles, was Sie tun müssen, ist mit HTML und CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <h3>Tabs With Dropdown Menu</h3> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a href="#">Home</a></li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
     <li><a href="#">Submenu 1-1</a></li> 
 
     <li><a href="#">Submenu 1-2</a></li> 
 
     <li><a href="#">Submenu 1-3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Menu 2</a></li> 
 
    <li><a href="#">Menu 3</a></li> 
 
    </ul> 
 
</div>

Answer 2

hier sehe ich zusammen mit dem tabify verwendet Bootstrap zu spielen, um ein Dropdown zu öffnen mit in sieht eine Registerkarte, ob das hilft, ich bin im Büro zur Zeit so nicht mehr tun könnte, hoffen, dass Sie es verwenden können, und einige Mühe tun, damit es funktioniert, wie Sie wollen es

(function(a) { 
 
    a.fn.extend({ 
 
    tabify: function(e) { 
 
     function c(b) { 
 
     hash = a(b).find("a").attr("href"); 
 
     return hash = hash.substring(0, hash.length - 4) 
 
     } 
 

 
     function f(b) { 
 
     a(b).addClass("active"); 
 
     a(c(b)).show(); 
 
     a(b).siblings("li").each(function() { 
 
      a(this).removeClass("active"); 
 
      a(c(this)).hide() 
 
     }) 
 
     } 
 
     return this.each(function() { 
 
     function b() { 
 

 
      location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent()) 
 
     } 
 
     var d = this, 
 
      g = { 
 
      ul: a(d) 
 
      }; 
 
     a(this).find("li a").each(function() { 
 
      a(this).attr("href", a(this).attr("href") + "-tab") 
 
     }); 
 
     location.hash && b(); 
 
     setInterval(b, 100); 
 
     a(this).find("li").each(function() { 
 
      a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide() 
 
     }); 
 
     e && e(g) 
 
     }) 
 
    } 
 
    }) 
 
})(jQuery); 
 

 
$(document).ready(function($) { 
 
    $("#tab-menu").tabify(); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://takazudo.github.io/jQuery.tabify/demos/1/styles.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="http://takazudo.github.io/jQuery.tabify/jquery.tabify.js"></script> 
 

 
<!-- TABS --> 
 
<div class="container"> 
 
    <ul id="tab-menu"> 
 
    <li class="active"><a href="#tab1">Tab 1</a></li> 
 
    <li> 
 
     <div class="dropdown"> 
 
     <a class="dropdown-toggle" type="button" data-toggle="dropdown">Tab 2</button> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#tab2">Overview</a></li> 
 
    <li><a href="#tab2">Floorplans</a></li> 
 
    <li><a href="#tab2">Specifications</a></li> 
 
    </ul> 
 
    </div> 
 
    </li> 
 
    <li><a href="#tab3">Tab 3</a></li> 
 
    <li><a href="#tab4">Tab 4</a></li> 
 
    </ul> 
 
</div> 
 

 
<!-- CONTENT --> 
 
<div class="container"> 
 
    <div id="tab1"> 
 
    <p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido 
 
     consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
 
    </div> 
 
    <div id="tab2"> 
 
    <div id="dropdown1"> 
 
     <p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
 
    </div> 
 
    <div id="dropdown2"> 
 
     <p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
 
    </div> 
 
    <div id="dropdown3"> 
 
     <p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
 
     comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
 
    </div> 
 
    </div> 
 
    <div id="tab3"> 
 
    <p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido 
 
     consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
 
    </div> 
 
    <div id="tab4"> 
 
    <p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido 
 
     consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> 
 
    </div> 
 
</div>