一旦内容加载到下面，为什么我的一个选择下拉列表会消失？

时间：2013-08-03 14:45:27

标签： jquery html css jquery-ui html-select

我有三个标签，用于选择小部件;选择一个项目会填充下面div的内容。在三个案件中的两个案件中，一切都很好;但是，在第三个中，下拉消失了。内容布局的差异在于第三个（“坏”的，下拉消失的情况），内容不是那么宽。

这是一个好看的样子：

enter image description here

这是失败的那个看起来像（你应该在下拉列表中看到“乡村音乐奖”）：

enter image description here

所有这些代码都是相同的：HTML是动态创建的，然后分配给内容区域：

$('#MoviesContent').html(htmlBuilder);
. . .
$('#MusicContent').html(htmlBuilder);

那么为什么其他人会认为选择小部件的重要基础是不可侵犯的，而音乐部分则通过clodhoppers踩踏花坛？

更新

根据大众需求，这里是相关代码：

的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>"
    }
]

1 个答案:

答案 0 :(得分：4)

我不确定，但我猜你的下拉列表仍然存在 - 它只是坐在页面的底部，因为它与你的大div在同一行，默认情况下，内联块将对齐其底边。其他人正在努力，因为他们的宽度足以迫使换线，但你的狭窄音乐不是。尝试将您的内容div从display:inline-block更改为display:block以强制它们分成不同的行，或添加clear:both。

相关问题
最新问题