Question

我在Rails 3上使用Bootstrap 3（Haml == HTML＆amp;＆amp; Coffee == JS），而我是JavaScript中的新手。

我正在寻找使用Bootstrap的下拉菜单，因为当我点击li＆gt; a时，我希望它生成一个新的块，其中包含与列出的货币相关联的金额。

Bootstrap下拉列表如下所示：

<div class="dropdown currencies">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select a currency
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu currencies-list" aria-labelledby="dropdownMenu1">
        <li class="euro"><a href="#">Price in €</a></li>
        <li class="dollar"><a href="#">Price in $</a></li>
        <li class="pound"><a href="#">Price in £</a></li>
    </ul>
</div>

以下是金额列表的内容：

<ul class="prices-list">
    <li class="euro">6.50€</li>
    <li class="dollar">$4.96</li>
    <li class="pound">£5.58</li>
</ul>

我应该如何将这些价格链接到仅在选择了关联的li＆gt; a Bootstrap下拉菜单时显示？（我的意思是，如果＆＃34;价格在€＆＃34;在下拉列表中选择，仅显示 - 金额/价格以€。）

另外，我希望默认情况下选择并显示$ amount。

我认为这是微不足道的，但是我已经用一段时间搜索了我的问题而没有找到任何东西...

如果你愿意，不要犹豫回答Haml * Coffee，非常感谢你！

Answer 1

做一些简单的隐藏/显示

$('.currencies-list a').click(function(){
 var class = $(this).parent().attr('class');//get the class of the currency selected
 $('.prices-list').find('li').hide();//hide all prices 
 $('.prices-list').find('li.'+class).show();//show only the price for the selected currency 
})

Bootstrap 3：选择下拉项时如何生成新块？

1 个答案: