我正在尝试另一种解决方案来解决显示/隐藏单个 div 时遇到的问题。
我正在尝试使用 JQUERY UI 下拉菜单作为下拉菜单菜单有效但我的点击功能无效的解决方案。
基本上，除 chartdiv1 外，所有 div 都隐藏在加载时，当用户单击菜单项时，其他 div 将根据需要显示。非常感谢您的帮助。
我的 js fiddle 。 http://jsfiddle.net/Jason1975/qtdojq2g/
HTML
<body onLoad="hide()">
<ul id="menu">
<li><a id="1">Unit Price</a></li>
<li>Unit Price in Alternative Currency
<ul>
<li><a id="2">GSO_EURO</a></li>
<li><a id="3">GSO_GBP</a></li>
<li><a id="4">GSO_ZAR</a></li>
</ul>
</li>
<li>Unit Price Performance over period
<ul>
<li><a id="5">GSO_USD</a></li>
<li><a id="6">GSO_EURO</a></li>
<li><a id="7">GSO_GBP</a></li>
<li><a id="8">GSO_ZAR</a></li>
</ul>
</li>
</ul>
<br /><br />
<!-- Chart Divs -->
<!-- Chartdiv1 - Unit Price in US Dollars -->
<div id="chartdiv1" style="width:100%; height:250px; background: #CCC"">CHARTDIV1 - USD CURRENCY</div><br />
<!-- End Chartdiv1 -->
<!-- Chartdiv2 - EURO Currency -->
<div id="chartdiv2" style="width:100%; height:250px; background: #CCC">CHARTDIV2 - EURO CURRENCY</div><br />
<!-- End Chartdiv2 -->
<!-- Chartdiv3 - GBP Currency -->
<div id="chartdiv3" style="width:100%; height:250px; background: #CCC">CHARTDIV3 - GBP CURRENCY</div><br />
<!-- End Chartdiv3 -->
<!-- Chartdiv4 - ZAR Currency -->
<div id="chartdiv4" style="width:100%; height:250px; background: #CCC">CHARTDIV4 - ZAR CURRENCY</div><br />
<!-- End Chartdiv3 -->
<!-- Chartdiv5 - USD Unit Price Perfomance over a Period -->
<div id="chartdiv5" style="width:100%; height:250px; background: #CCC">CHARTDIV5 - USD PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv5 -->
<!-- Chartdiv6 - EURO Unit Price Perfomance over a Period -->
<div id="chartdiv6" style="width:100%; height:250px; background: #CCC">CHARTDIV6 - EURO PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv6 -->
<!-- Chartdiv7 - GBP Unit Price Perfomance over a Period -->
<div id="chartdiv7" style="width:100%; height:250px; background: #CCC">CHARTDIV7 - GBP PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv7 -->
<!-- Chartdiv8 - ZAR Unit Price Perfomance over a Period -->
<div id="chartdiv8" style="width:100%; height:250px; background: #CCC">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv8 -->
<br>
JQUERY
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
hide();
$( '#a#1').click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv1' ).show();
} else {
$( 'div#chartdiv1' ).hide();
}
});
$( 'a#2' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv2' ).show();
} else {
$( 'div#chartdiv2' ).hide();
}
});
$( 'a#3' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv3' ).show();
} else {
$( 'div#chartdiv3' ).hide();
}
});
$( 'a#4' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv4' ).show();
} else {
$( 'div#chartdiv4' ).hide();
}
});
$( 'a#5' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv5' ).show();
} else {
$( 'div#chartdiv5' ).hide();
}
});
$( 'a#6' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv6' ).show();
} else {
$( 'div#chartdiv6' ).hide();
}
});
$( 'a#7' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv7' ).show();
} else {
$( 'div#chartdiv7' ).hide();
}
});
$( 'a#8' ).click( function() {
var $select = $( this );
if ( $select ) {
$( 'div#chartdiv8' ).show();
} else {
$( 'div#chartdiv8' ).hide();
}
});
});
function hide() {
var show = ['chartdiv1'];
for ( var i = 0; i < show.length; ++i )
document.getElementById(show[i]).style.display = "block";
var hide = ['chartdiv2','chartdiv3','chartdiv4','chartdiv5','chartdiv6','chartdiv7','chartdiv8','hidden','hidden2','currency','currency2'];
for ( var i = 0; i < hide.length; ++i )
document.getElementById(hide[i]).style.display = "none";
}
//END OF ALL THE CHART ITEMS
</script>
最佳答案
不知道为什么我也重写了代码，但是尽管如此。
-
<a>id替换为data-id, 其中有id目标元素。 - 目标
<div>s 样式放在 CSS 中chartdiv类样式，包括默认隐藏。 - 单例
click事件处理程序添加到<a>里面的<ul id="menu">. - 目标
<div>我们有额外的js-chartdiv隐藏/显示处理类。
Fiddle .
JS:
$(document).ready(function()
{
$('.js-chartdiv:first').show();
$('#menu a').on('click', function()
{
$('.js-chartdiv:visible').hide();
$('#' + $(this).data('id')).show();
});
});
HTML:
<ul id="menu">
<li>
<a data-id="chartdiv1">Unit Price</a>
</li>
<li>Unit Price in Alternative Currency
<ul>
<li>
<a data-id="chartdiv2">GSO_EURO</a>
</li>
<li>
<a data-id="chartdiv3">GSO_GBP</a>
</li>
<li>
<a data-id="chartdiv4">GSO_ZAR</a>
</li>
</ul>
</li>
<li>Unit Price Performance over period
<ul>
<li>
<a data-id="chartdiv5">GSO_USD</a>
</li>
<li>
<a data-id="chartdiv6">GSO_EURO</a>
</li>
<li>
<a data-id="chartdiv7">GSO_GBP</a>
</li>
<li>
<a data-id="chartdiv8">GSO_ZAR</a>
</li>
</ul>
</li>
</ul>
<br /><br />
<div id="chartdiv1" class="chartdiv js-chartdiv">CHARTDIV1 - USD CURRENCY</div>
<div id="chartdiv2" class="chartdiv js-chartdiv">CHARTDIV2 - EURO CURRENCY</div>
<div id="chartdiv3" class="chartdiv js-chartdiv">CHARTDIV3 - GBP CURRENCY</div>
<div id="chartdiv4" class="chartdiv js-chartdiv">CHARTDIV4 - ZAR CURRENCY</div>
<div id="chartdiv5" class="chartdiv js-chartdiv">CHARTDIV5 - USD PERFORMANCE PERIOD</div>
<div id="chartdiv6" class="chartdiv js-chartdiv">CHARTDIV6 - EURO PERFORMANCE PERIOD</div>
<div id="chartdiv7" class="chartdiv js-chartdiv">CHARTDIV7 - GBP PERFORMANCE PERIOD</div>
<div id="chartdiv8" class="chartdiv js-chartdiv">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div>
CSS:
.ui-menu
{
width: 250px;
font-weight: 300;
font-size: 10px;
}
.chartdiv
{
width: 100%;
height: 250px;
background: #CCC;
display: none;
}
关于jquery - 使用 JqueryUI 下拉菜单显示单个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27438387/