選択ウィジェットを備えた 3 つのタブがあります。項目を選択すると、下の div の内容が入力されます。3 つのケースのうち 2 つでは、すべて問題ありません。ただし、3 番目では、ドロップダウンが表示されなくなります。コンテンツのレイアウトの違いは、3 番目のもの (ドロップダウンが消える「悪い」もの) の場合、コンテンツがそれほど広くないことです。
良いものは次のようになります。
失敗したものは次のようになります (ドロップダウンで [Country Music Awards] が選択されているはずです)。
コードはすべて同じです。HTML は動的に作成され、コンテンツ領域に割り当てられます。
$('#MoviesContent').html(htmlBuilder);
. . .
$('#MusicContent').html(htmlBuilder);
では、なぜ他の人は、セレクト ウィジェットの踏み台が不可侵であると考えるのでしょうか?
アップデート
一般的な要求により、関連するコードは次のとおりです。
jQuery
$('#musicDropDown').change(function () {
var sel = this.value;
. . .
else if ((sel == "CMA") && (currentMusicSelection != "CMA")) {
currentMusicSelection = "CMA";
getCMA();
}
. . .
}); //musicDropDown
function getCMA() {
var htmlBuilder = '';
$.getJSON('Content/cma.json', function (data) {
$.each(data, function (i, dataPoint) {
if (IsYear(dataPoint.category)) {
htmlBuilder += '<div class=\"yearBanner\">' + dataPoint.category + '</div>';
} else {
htmlBuilder += '<section class=\"wrapper\" ><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
dataPoint.imghref +
'<div id=\"prizeCategory\" class=\"category\">' +
dataPoint.category +
'</div><br/><cite id=\"prizeTitle\" >' +
dataPoint.title +
'</cite><br/><div id=\"prizeArtist\" class=\"artist\">' + dataPoint.artist + '</div><br/>';
if (dataPoint.mp3.trim().length > 2) {
htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.mp3) + '\"' +
' target=\"_blank\" >mp3</a></button>';
}
if (dataPoint.cd.trim().length > 2) {
htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.cd) + '\"' +
' target=\"_blank\" >CD</a></button>';
}
if (dataPoint.vinyl.trim().length > 2) {
htmlBuilder += '<button><a href=\"' + Urlify(dataPoint.vinyl) + '\"' +
' target=\"_blank\" >Vinyl</a></button>';
}
htmlBuilder += '</section>';
}
}); //each
$('#MusicContent').html(htmlBuilder).
find('img, button').click(function (evt) {
$(this).css('border', '1px solid gold')
});
$('#MusicContent').css('background-color', 'black');
$('button').button();
}); //getCMA
$largest = 0;
$(".wrapper").each(function () {
if ($(this).height() > $largest) {
$largest = $(this).height();
}
});
$(".wrapper").css("height", $largest);
}
CSS
.yearBanner {
font-size: 2em;
color: white;
font-family: 'Segoe UI Light', Candara, Calibri, Consolas, sans-serif;
width:400px;
padding-top: 50px;
margin-left:50px;
padding-bottom:20px;
}
.floatLeft {
float: left;
padding-right: 10px;
padding-left: 5px;
}
section.wrapper {
/* this may need to be wider when landscape cover img is used */
min-width: 400px;
overflow: hidden;
display: block;
float: left;
margin-top: 5px;
}
.wrapper{
float: left;
width: 400px;
margin-left:20px;
padding-bottom:20px;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
width: 160px;
}
.clearfix {
display: inline-block;
}
HTML
<div id="tabs" class="content-wrapper">
<ul>
<li><a href="#tab-Books">Books</a></li>
<li><a href="#tab-Movies">Movies</a></li>
<li><a href="#tab-Music">Music</a></li>
</ul>
<div id="tab-Books">
<select id="bookDropDown">
<option value="Pulitzer">Pulitzer</option>
<option value="NBCC">National Book Critics Circle</option>
<option value="NBA">National Book Awards</option>
<option value="NOBA">National Outdoors Book Awards</option>
</select>
<div id="BooksContent" class="clearfix">Content in Books tab</div>
</div>
<div id="tab-Movies">
<select id="moviesDropDown">
<option value="Oscars">Academy Awards/Oscars</option>
<option value="GoldenGlobe">Golden Globe</option>
<option value="Cannes">Cannes Film Festival</option>
<option value="Sundance">Sundance</option>
</select>
<div id="MoviesContent" class="clearfix">Content in Movies tab</div>
</div>
<div id="tab-Music">
<select id="musicDropDown">
<option value="Grammies">Grammies</option>
<option value="AMA">American Music Awards</option>
<option value="CMA">Country Music Awards</option>
<option value="Indies">Indies</option>
</select>
<div id="MusicContent" class="clearfix">Content in Music tab</div>
</div>
</div>
そして、遊ぶためのいくつかのjson「レコード」：
[
{
"category": "2012",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "Chief",
"artist": "Eric Church",
"mp3": "B006N98GWQ",
"cd": "B004ZBIJE4",
"vinyl": "B005CAAWZQ",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B004ZBIJE4/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B004ZBIJE4.01.MZZZZZZZ.jpg\" alt=\"Eric Church Album cover\" /></a>"
},
{
"category": "2011",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "My Kinda Party",
"artist": "Jason Aldean",
"mp3": "B0048067WI",
"cd": "B0041GWWSC",
"vinyl": "--",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B0041GWWSC/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B0041GWWSC.01.MZZZZZZZ.jpg\" alt=\"Jason Aldean Album cover\" /></a>"
},
{
"category": "1983",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "The Closer You Get?",
"artist": "Alabama",
"mp3": "B00138H5QU",
"cd": "B000002W6X",
"vinyl": "B000M6RWOY",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B000002W6X/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000002W6X.01.MZZZZZZZ.jpg\" alt=\"Alabama Album cover\" /></a>"
},
{
"category": "1982",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "Always on My Mind",
"artist": "Willie Nelson",
"mp3": "--",
"cd": "B0012GMY6Y",
"vinyl": "--",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B0012GMY6Y/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B0012GMY6Y.01.MZZZZZZZ.jpg\" alt=\"Willie Nelson Album cover\" /></a>"
},
{
"category": "1981",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "I Believe in You",
"artist": "Don Williams",
"mp3": "B0048ZLL2O",
"cd": "B006M6AI4E",
"vinyl": "B000HA1VJM",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B006M6AI4E/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B006M6AI4E.01.MZZZZZZZ.jpg\" alt=\"Don Williams Album cover\" /></a>"
},
{
"category": "1980",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "Coal Miner's Daughter",
"artist": "Soundtrack",
"mp3": "B00AE2CV38",
"cd": "B00004C4Q6",
"vinyl": "--",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B00004C4Q6/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B00004C4Q6.01.MZZZZZZZ.jpg\" alt=\"Soundtrack Album cover\" /></a>"
},
{
"category": "1968",
"title": "blanktitle",
"artist": "blankauthor",
"mp3": "blankmp3",
"cd": "blankcd",
"vinyl": "blankvinyl",
"imghref": "blankimghref"
},
{
"category": "Album of the Year",
"title": "At Folsom Prison",
"artist": "Johnny Cash",
"mp3": "B00136Q342",
"cd": "B000028U0Y",
"vinyl": "B003WWZ148",
"imghref": "<a href=\"http://www.amazon.com/exec/obidos/ASIN/B000028U0Y/garrphotgall-20\" target=\"_blank\"><img height=\"160\" width=\"160\" src=\"http://images.amazon.com/images/P/B000028U0Y.01.MZZZZZZZ.jpg\" alt=\"Johnny Cash Album cover\" /></a>"
}
]