單擊按鈕后如何顯示下拉列表

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

嘗試這個 ：

1. 您的下拉菜單最初是由CSS隱藏的。 顯示：無

用戶單擊“購買”按鈕時顯示的jQuery代碼：

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

Answer 2

您可以使用下拉div style屬性將默認情況下的下拉列表隱藏為

style="display:none"

點擊按鈕，您可以顯示下拉列表。 對於此代碼將如下所示：

網頁HTML

編輯：實現所需的功能首先從按鈕控件中刪除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
}
 });