问题描述:

I'm having a huge issue trying to replicate the same menu on all my tabs with no luck.

The menu in question is located inside the last tab #BuildDesign

So far I've tried to change input[name="intervaltype"*

and **sidebar-nav a in all JS, HTML and CSS as well as .checkAll and .check by adding a 2 to the end [example: intervaltype2]

I have copied and pasted the code into another tab and made all the changes to the id and classes, but it is impossible to replicate the menu on my other tabs.

Is there anybody out there that knows how to replicate my menu so that it works on all tabs?

UPDATE 3 http://fiddle.jshell.net/xp8L3h7g/1/ I updated the fiddle thanks to pwagner who pointed out a problem with the ending

div tags. This fiddle just has the sub menu I want to replicate on all

the tabs.

Please note that when you open the fiddle you have to stretch the preview screen to at least 992px in width in order to view the menu, also the menu is placed in the last icon the bullhorn all the way to the right. [Click on it]

BONUS: For some reason the color of the .servicelist icons on the top should be orange, but instead this code overrides the color of the servicelist:

 .sidebar-nav a.active {

color:#39f; background-color:#eee;

Javascript:

//Selection Active

$('.sidebar-nav a').click(function() {

$('a').removeClass();

$(this).addClass('active');

});

//Custom Toggle

$('input[name="intervaltype"]').click(function () {

$('#Custom').toggleClass('active');

$('#Types').toggleClass('active');

});

//Check and Uncheck

$(".checkAll").click(function () {

$(".check").prop('checked', $(this).prop('checked'));

});

//Selection Active

$('.servicelist a').click(function() {

$('a').removeClass();

$(this).addClass('active');

});

HTML:

 <div id="sidebar-wrapper2">

<!-- Sidebar -->

<div class="topfilter">

<div class="tabber">

<!-- Nav tabs -->

<ul class="servicelist" role="tablist">

<li class="col-md-3 col-xs-3 serviceop active" role="presentation">

<a href="#construction" aria-controls="construction" role="tab" data-toggle="tab">

<i class="fa-2x fa fa-home"></i>

</a>

</li>

<li class="serviceop col-md-3 col-xs-3" role="presentation">

<a href="#precon" aria-controls="precon" role="tab" data-toggle="tab">

<i class="fa-2x fa fa-info-circle"></i>

</a>

</li>

<li class="col-md-3 col-xs-3 serviceop" role="presentation">

<a href="#generalcon" aria-controls="generalcon" role="tab" data-toggle="tab">

<i class="fa-2x fa fa-briefcase"></i>

</a>

</li>

<li class="col-md-3 col-xs-3 serviceop" role="presentation">

<a href="#builddesign" aria-controls="builddesign" role="tab" data-toggle="tab">

<i class="fa-2x fa fa-bullhorn"></i>

</a>

</li>

</ul>

</div> <!-- End Tabber-->

</div><!-- End Topfilter-->

</div> <!-- End sidebar-wrapper 2-->

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane fade in active" id="construction">

<br />

<br />

<h2>Default</h2>

</div> <!-- Close Tab Panel -->

<div role="tabpanel" class="tab-pane fade" id="precon">

<br />

<br />

<h2>2nd Tab</h2>

</div> <!-- Close Tab Panel -->

<div role="tabpanel" class="tab-pane fade" id="generalcon">

<br />

<br />

<h2>3rd Tab</h2>

</div> <!-- Close Tab Panel -->

<div role="tabpanel" class="tab-pane fade" id="builddesign">

<div id="sidebar-wrapper3">

<li class="toppy" role="tab" style="list-style:none;">

<label data-target="#Custom"> <span class="customtext">Choose</span>

<input name="intervaltype" class="check checkAll chix" type="checkbox" />

</label>

</li>

</div>

<div class="tab-content" id="sidebar-wrapper">

<div role="tabpanel" class="tab-pane" id="Custom">

<ul class="sidebar-nav">

<form role="form">

<div class="form-group">

<div class="checkbox">

<label>

<input type="checkbox" class="check checkAll"> Settings

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox" class="check"> Log out

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox" class="check">Profile

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox" class="check"> Account

</label>

</div>

</div><!-- End Form-group -->

</form>

</ul> <!-- End Sidebar Nav-->

</div> <!-- End Tab Panel-->

<div role="tabpanel" class="tab-pane active" id="Types">

<ul class="sidebar-nav">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a class="active highlight" data-toggle="collapse" data-parent="#accordion" href="#collapseZero"><span class="iconpad glyphicon glyphicon glyphicon-asterisk">

</span>Call Me</a>

</h4>

</div><!-- End Panel-Heading -->

<div class="panel-group" id="accordion">

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a class="highlight" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="iconpad glyphicon glyphicon-user">

</span>Log</a>

</h4>

</div> <!-- End Panel-Heading -->

<div id="collapseOne" class="panel-collapse collapse in">

<li>

<a class="highlight" href="#/content">

Loglines

</a>

</li>

</div> <!-- End CollapseOne -->

<div class="bottomfilter">

<a href="#" class="filtertitle">Terms</a>

</div> <!-- End Bottom Filter -->

</div> <!-- End Panel Default in Accordion -->

</div><!-- End Accordion -->

</div> <!-- End Panel Default -->

</ul> <!-- End Sidebar Nav-->

</div> <!-- End Types 1 -->

</div> <!-- End SideBar Wrapper 1 -->

</div> <!-- End Tab Panel -->

</div> <!-- End Tabs Content -->

CSS:

a {outline:none !important;}

html,

body,

.wrap {

height: 100%;

}

.wrap {

box-sizing: border-box;

}

form {

height: 100%

}

.wrap {

min-height: 100%;

height: auto !important;

height: 100%;

margin-bottom: -60px;

/* for sticky footer to not go below page */

/* for sticky header to not overlap content */

}

.push,

.footer {

height: 60px;

}

.footer {

background-color: #ebebeb;

height: 60px;

width: 100%;

position: fixed;

bottom: 0;

}

.content {

position: absolute;

width: 100%;

top: 120px;

background-color: yellow;

z-index: 0;

}

#sidebar-wrapper {

z-index: 1000;

position: fixed;

left: 142px;

height:95%;

width: 0; bottom:0; top:65px;

height:auto; border-top:1px solid #fff;

margin-left: -142px;

overflow-y: auto; overflow-x:hidden;

background: #eee;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

#sidebar-wrapper2 {

z-index: 1000;

position: fixed;

left: 142px;

top:0;

margin-bottom: 0px;

width:100%;

min-height:55px; height:auto;

margin-left: -142px;

background: #eee;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

#sidebar-wrapper3 {

z-index: 1000;

position: fixed;

left: 142px;

top:35px;

margin-bottom: 0px;

width:auto;

min-height:55px; height:auto;

margin-left: -142px;

background: #eee;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.filtertitle { position:relative; display:inline-block; color:#000; width:auto; }

.topfilter { max-width:100%; min-width:100%; position:relative; display:inline-block; min-height:65px; }

.tabber {bottom:0px !important; height:auto; left:0; position:relative; display:inline-block; border-bottom: solid #fff 1px; }

.customtext {color:#666;}

.toppy {bottom:0px !important; text-indent:9px; }

.bottomfilter {border-top: solid #666 1px; width:100%; height:auto; position:relative; display:block; text-align:left; background-color:#eee; }

.checkbox {margin-left:25px !important;}

.dropdown { margin-top:15%; display:inline-block; }

.dropdown a {margin-left:20px; min-width:100% !important; }

.caret {text-align:right !important; position:relative;}

#wrapper.toggled #sidebar-wrapper {

width: 200px;

}

#wrapper.toggled #sidebar-wrapper2 {

width: 200px;

}

#page-content-wrapper {

width: 100%;

position: absolute;

padding: 15px;

}

#wrapper.toggled #page-content-wrapper {

position: absolute;

margin-right: -200px;

}

/* Sidebar Styles */

.sidebar-nav {

position: absolute;

top: 0px;

width:inherit; min-width:100%;

margin: 0;

padding: 0;

list-style: none;

}

.sidebar-nav li {

text-indent: 20px;

line-height: 40px;

}

.sidebar-nav li a {

display: block;

text-decoration: none;

color: #999999;

}

.sidebar-nav li a:hover {

text-decoration: none;

color: #666;

background:#bdc3c7;

}

.sidebar-nav li a:active,

.sidebar-nav li a:focus {

text-decoration: none;

}

.sidebar-nav > .sidebar-brand {

height: 65px;

font-size: 18px;

line-height: 60px;

}

.sidebar-nav > .sidebar-brand a {

color: #999999;

}

.sidebar-nav > .sidebar-brand a:hover {

color: #fff;

background: none;

}

@media screen and (min-width:768px) {

#wrapper {

padding-left: 300px;

}

#wrapper.toggled {

padding-left: 0;

}

#wrapper.toggled #sidebar-wrapper {

width: 0;

}

#page-content-wrapper {

padding: 20px;

position: relative;

}

#wrapper.toggled #page-content-wrapper {

position: relative;

margin-right: 0;

}

}

@media screen and (max-width:1526px) {

.content,

.footer {

width: 82%;

right: 0;

}

.header {width:82%;}

#sidebar-wrapper {

width: 18%;

}

#sidebar-wrapper2 {

width: 18%;

}

}

@media screen and (max-width:1059px) {

.content,

.footer {

width: 80%;

right: 0;

}

.header {width:80%;}

#sidebar-wrapper {

width: 20%;

}

#sidebar-wrapper2 {

width: 20%;

}

}

@media screen and (min-width:1527px) {

.content,

.footer {

width: 85%;

right: 0;

}

.header {width:85%;}

#sidebar-wrapper {

width: 15%;

}

#sidebar-wrapper2 {

width: 15%;

}

}

@media screen and (max-width:991px) {

.content,

.footer {

width: 100%;

right: 0;

}

.filtertitle {display:none;}

#sidebar-wrapper {

width:0;

}

#sidebar-wrapper2 {

width:0;

}

.topfilter {width:0; display:none;}

.dropdown a {display:none;}

}

.iconpad { margin-right:10px; }

.panel-body { padding:0px; }

.panel-body table tr td { padding-left: 15px }

.panel-body .table {margin-bottom: 0px; }

.panel-title a:hover {color:#333; text-decoration:none; background:none !important;}

.panel-title a:focus {color:#39f; text-decoration:none; background:none !important;}

.panel-title a {text-decoration:none; background:none !important;}

.sidebar-nav a:hover {

color: #666;

}

.sidebar-nav a.active {

color:#39f; background-color:#eee;

.servicelist { list-style:none; padding:0; }

.servicelist a{ background:none !important; text-decoration:none; color:#333; list-style:none; }

.servicelist a :hover { color:#bdc3c7; }

.servicelist > li.active > a .fa-2x {

color:#f90;

cursor: pointer;

}

网友答案:

I finally solved the problem, and I will post the code here for anyone that is interested in my solution.

This is the solution fiddle: http://fiddle.jshell.net/ef44nf34/4/

How I solved it: Once I fixed all the div's and made sure they all had ending tags I did the following:

1. I Copied and pasted the menu code from the .tab-panel and pasted that block of code on all the tab-panels

2. I then changed the names of the following copied items on the html, and then duplicated the original code on the css, and javascript with the new names:

.sidebar-nav, .sidebar-nav2, .sidebar-nav3, and .sidebar-nav4 

 #Custom, #Custom2, #Custom3, #Custom4 

#Types, #Types2, #Types3, #Types4 

 intervaltype, intervaltype2, intervaltype3, intervaltype4

.checkBelow, .checkBelow2, .checkBelow3, .checkBelow4

.checkother, .checkother2, .checkother3, .checkother4

.check, check2, .check3, .check4

.checkAll,.checkAll2,.checkAll3, .checkAll4

#accordion, #accordion2, #accordion3, #accordion4

collapseZero, collapseOne, bcollapseZero, bcollapseOne, ccollapseZero, ccollapseOne, dcollapseZero, dcollapseOne  

BONUS: For the color issue I was having I simply removed this block of code: .sidebar-nav a:hover { color: #666; }

.sidebar-nav a.active {
color:#39f; background-color:#eee;   
相关阅读:
Top