Created
October 13, 2017 16:33
-
-
Save stirlinghewitt/0bae6fd9edfdd636593f29a54eeaf979 to your computer and use it in GitHub Desktop.
keep bootstrap dropdown open for hover tabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="col-xs-12"> | |
<div class="row"> | |
<div class="col-xs-12 col-sm-4 col-md-3"> | |
<ul class="nav nav-pills nav-stacked sports-nav" role="tablist"> | |
<li role="presentation" class="active"><a href="#tab-nfl" aria-controls="nfl" role="tab" data-toggle="pill" class="dd-keep">NFL</a></li> | |
<li role="presentation" ><a href="#tab-mlb" aria-controls="mlb" role="tab" data-toggle="pill" class="dd-keep">MLB</a></li> | |
<li role="presentation"><a href="#tab-nba" aria-controls="nba" role="tab" data-toggle="pill" class="dd-keep">NBA</a></li> | |
<li role="presentation"><a href="#tab-nhl" aria-controls="nhl" role="tab" data-toggle="pill" class="dd-keep">NHL</a></li> | |
<li role="presentation"><a href="#tab-soccer" aria-controls="soccer" role="tab" data-toggle="pill" class="dd-keep">MLS</a></li> | |
<li role="presentation"><a href="#tab-mma" aria-controls="mma" role="tab" data-toggle="pill" class="dd-keep">MMA/UF</a></li> | |
<li role="presentation"><a href="#tab-topsports" aria-controls="top-sports" role="tab" data-toggle="pill" class="dd-keep">Top Sports</a></li> | |
</ul> | |
</div> | |
<div class="col-xs-12 col-sm-8 col-md-9"> | |
<div class="tab-content"> | |
<div role="tabpanel" class="tab-pane " id="tab-mlb"> | |
<div class="row"> | |
{atbslist list="Dropdown - MLB" assign=hec} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="{$i->URL}">{$i->Name}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
<div role="tabpanel" class="tab-pane active" id="tab-nfl"> | |
<div class="row"> | |
{atbslist list="Dropdown - NFL" assign=hec} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="{$i->URL}">{$i->Name}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
<div role="tabpanel" class="tab-pane" id="tab-nba"> | |
<div class="row"> | |
{atbslist list="Dropdown - NBA" assign=hec} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="{$i->URL}">{$i->Name}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
<div role="tabpanel" class="tab-pane" id="tab-nhl"> | |
<div class="row"> | |
{atbslist list="Dropdown - NHL" assign=hec} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="{$i->URL}">{$i->Name}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
<div role="tabpanel" class="tab-pane" id="tab-soccer"> | |
<div class="row"> | |
{atbslist list="Dropdown - MLS" assign=hec} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="{$i->URL}">{$i->Name}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
<div role="tabpanel" class="tab-pane" id="tab-mma"> | |
<div class="row"> | |
{atbslist list="Dropdown - MMA" assign=hec} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="{$i->URL}">{$i->Name}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
<div role="tabpanel" class="tab-pane" id="tab-topsports"> | |
<div class="row"> | |
{atbs_hot_performers_in_category limit=10 assign=hec CategoryID=1} | |
{foreach from=$hec key=k item=i} | |
<div class="col-xs-6 col-sm-6"> | |
<a href="/{$i->URL}">{$i->Performer}</a> | |
</div> | |
{/foreach} | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
{literal} | |
<script type="text/javascript"> | |
if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { | |
$('.dropdown.keep-open').on({ | |
"shown.bs.dropdown": function () { | |
this.closable = true; | |
}, | |
"click": function (e) { | |
var target = $(e.target); | |
if (target.hasClass("dd-keep")) | |
this.closable = false; | |
else | |
this.closable = true; | |
}, | |
"hide.bs.dropdown": function () { | |
return this.closable; | |
} | |
}); | |
$(".dropdown a.dropdown-toggle").click(function() { | |
$(this).closest(".dropdown-menu").prev().dropdown("toggle"); | |
}); | |
} else { | |
$('.nav-pills > li > a').hover(function() { | |
$(this).tab('show'); | |
}); | |
} | |
</script> | |
{/literal} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment