单击下拉链接时无法显示特定的 div答案

【问题标题】：Can't show specific div on click of a drop down link单击下拉链接时无法显示特定的 div
【发布时间】：2014-04-30 18:51:01
【问题描述】：

我有一个下拉菜单，我想为您选择的每个链接显示不同的 div。 div 已成功隐藏，但点击后未显示...有人知道吗？

HTML

<select id="cd-dropdown" name="cd-dropdown" class="cd-select">
<option value="-1" selected>The drop down menu</option>
<option value="1" class="icon-monkey">Choice 1</option>
<option value="2" class="icon-bear">Choice 2</option>
<option value="3" class="icon-squirrel">Choice 3</option>
<option value="4" class="icon-elephant">Choice 4</option>
</select>

<div id="1" class="box">Content 1</div>
<div id="2" class="box">Content 2</div>
<div id="3" class="box">Content 3</div>
<div id="4" class="box">Content 4</div>

JAVASCRIPT

$(function () {
    $('#cd-dropdown').dropdown({
        gutter: 1,
        stack: false
    });
});
$(document).ready(function () {
    $('.box').hide();
    $('#cd-dropdown').change(function () {
        $('.box').hide();
        $('#' + $(this).val()).show("slow");
    });
});

【问题讨论】：

为什么单独的文档就绪调用和$('#cd-dropdown').dropdown({ 是什么？如果你删除 $(function () {$('#cd-dropdown').dropdown({gutter: 1,stack: false}); }); 它似乎工作正常。
我的价值观应该以字母开头。试试box1 等。
如果您删除 $().dropdown() 调用，那么它可以工作 (jsfiddle.net/4Et24)。它来自哪个库或该函数有什么作用？
@Anthony - HTML5 中可以使用数字 ID。
来自这里：tympanus.net/codrops/2012/11/29/…

标签： javascript jquery drop-down-menu show-hide

【解决方案1】：

Working fiddle
jQuery

$(function () {
    $('#cd-dropdown').dropdown({
        gutter: 1,
        stack: false
    });
    $('.box').hide();
    $('.cd-dropdown ul li').click(function () {
        $('.box').hide();
        $('#' + $(this).data("value")).show("slow");
    });
});

您使用的插件会转换dropdown in div，然后执行所需的动画...您可以使用Firebug 进行检查...

【讨论】：