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

试试这个：

你的下拉列表最初是由css隐藏的。显示：无

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

$(this).closest('.noLRPadding').next().removeClass('hidden');

Answer 2

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

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'); 
        });

编辑：如果想要显示带有动画效果的下拉菜单，则交替显示大小选择后想要打开BUY链接使用此脚本。

 $('#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
}
 });

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

2 个答案: