单击按钮后如何使下拉列表可见

Question

我是初学者， 希望有人能帮我解决我的问题 单击按钮后，我想使下拉列表可见， 它完全喜欢这里所做的事情： https://shop.adidas.co.in/#category/Pag-60/No-0/0/All/facet.DIVISION_CATEGORY_ss:%28%22FOOTWEAR%22%29%20AND%20allBrands_ss:%28%22ORIGINALS%22%29

当客户点击购买按钮时，购买按钮上方会出现一个下拉列表，我认为上面提到的网站中的这个例子已经很清楚了，

版本

如代码所示，当我点击购买按钮时，它会打开一个新链接， 我不想这样做 起初，当有人单击按钮时，它必须不起作用，只显示下拉列表， 其次，当用户从下拉列表中选择一个尺寸，然后单击它必须工作的按钮并打开链接时，

这正是我介绍的上述链接中发生的事情。 我的东西：

<button name="buySize" id="buySize" type="button" class="btn btn-success btn-sm" onclick="location.href='@Url.Action("AddToCart", "ShoppingCart", new { Barcode = @item.Barcode },"")'">
    خرید &raquo;
</button>
<div class="pull-left">
    <label class="control-label" id="drpSize">سایز:</label>
    <div class="product-quantity" id="drpSize" >
        @Html.DropDownListFor(model => model.CartItems[0].Size, new SelectList(Model.Sizes))
    </div>
</div>

这是我的下拉列表和按钮 还有javascript：`

$('#buySize').click(function () {
    if (this.click())
        $('#drpSize').show("fast");
    else
        $('#drpSize').hide("fast");
});

每一个帮助都很感激:)，

Answer 1

您可以在下拉列表div 中使用style 属性默认隐藏下拉列表

style="display:none"

点击按钮可以显示下拉列表。 这段代码如下：

CSHTML

编辑：您实现了所需的功能首先删除 onclick 事件 从按钮控制。

 <button name="buySize" id="buySize" type="button" class="btn btn-success btn-sm">
  خرید &raquo;</button>
   <div class="pull-left">
     <label class="control-label" id="drpSize">سایز:</label>
      <div class="product-quantity" id="drpSize" style="display:none" >
       @Html.DropDownListFor(model => model.CartItems[0].Size, new SelectList(Model.Sizes))                                                              </div>
    </div>

在js文件中

 $('#buySize').click(function () {
           $('#drpSize').css('display','block'); 
        });

编辑：如果想要显示带有动画效果的下拉菜单和 想要在选择尺码后打开购买链接，请使用此脚本。

 $('#buySize').click(function () {
   $('#drpSize').show('fast');
var val= $('#dropDownId :selected').text();
if(val!='Select'){
location.href= //which ever link you want to open put here
}
 });

Answer 2

试试这个：

1. 您的下拉菜单最初被 css 隐藏，即。显示：无

当用户点击购买按钮时显示它的 Jquery 代码：

$('#buySize').click(function () {
   $('#dropdown_id').show();
});