隱藏一個「清除」按鈕，直到「應用」按鈕，點擊

我有一個表格，我有我下面的過濾器按鈕（應用過濾器&清除過濾器）我想顯示「清除」時，「應用」按鈕點擊時隱藏「清除」按鈕。隱藏一個「清除」按鈕，直到「應用」按鈕，點擊

下面的代碼，如果我有我的表：

<dl class="filterlist" style="margin-top: 0px"> 
     <dt> 
      <label for="Environment">Environment</label> 
     </dt> 
     <dd> 
      @Html.DropDownList("EnvironmentDD", (IEnumerable<SelectListItem>)ViewBag.Environment, "- - All Environments - -", 
       new { @class = "ddstyle", @id = "Environment", @title = "Filter the table below by environment." }) 
     </dd> 
     <dt> 
      <label for="Product">Product</label> 
     </dt> 
     <dd> 
      @Html.DropDownList("ProductDD", (IEnumerable<SelectListItem>)ViewBag.Product, "- - All Products - -", 
       new { @class = "ddstyle", @id = "Product", @title = "Filter the table below by product." }) 
     </dd> 
     <dt> 
      <label for="TestType">Test Type</label> 
     </dt> 
     <dd> 
      @Html.DropDownList("TestTypeDD", (IEnumerable<SelectListItem>)ViewBag.TestType, "- - All Test Types - -", 
       new { @class = "ddstyle", @id="TestType", @title="Filter the table below by test type." }) 
     </dd> 
     <dt> 
      <label for="TestScenario">Test Scenario</label> 
     </dt> 
     <dd> 
      @Html.DropDownList("ScenarioDD", (IEnumerable<SelectListItem>)ViewBag.Scenario, "- - All Test Scenarios - -", 
       new { @class = "ddstyle", @id="TestScenario", @title="Filter the table below by test scenario." }) 
     </dd> 
     <dt>&nbsp;</dt> 
     <dd> 
      <button class="butstyle" id="ApplyFilter" type="submit" title="Click to apply any filters selected above."> 
       Apply Filter(s) <i class="fa fa-filter"></i> 
      </button> 
      <button class="butstyle" id="ClearFilters" title="Click to reset any filters set." style="display:none"> 
       Clear Filter(s) <i class="fa fa-eraser"></i> 
      </button> 
     </dd> 
    </dl>

我該怎麼做或什麼是爲我似乎無法讓我的頭周圍的最好方式。我正在使用HTML5 & MVC5。

默認情況下，該按鈕設置爲：

style="display:none">

來源

2014-03-25 murday1983

我寧願Ø做到這一點不帶Java/jQuery的可能的話 – murday1983

您可以使用「複選框黑客」。 [鏈接]（http://stackoverflow.com/questions/11166580/css3-transitions-is-there-an-on-click-option-without-using-jquery） – RobinvdA

可能有人請爲此提供jQuery的，因爲我已經找到使用這將是最好的選擇。 AJ提供的那個似乎不起作用。即使在他們提供的小提琴 – murday1983

沒有JQuery的：

<button onclick="document.getElementById('ClearFilters').style.display='block';" class="butstyle" id="ApplyFilter" type="submit" title="Click to apply any filters selected above."> 
    Apply Filter(s) <i class="fa fa-filter"></i> 
</button> 
<button onclick="document.getElementById('ClearFilters').style.display='none';" class="butstyle" id="ClearFilters" title="Click to reset any filters set." style="display:none"> 
    Clear Filter(s) <i class="fa fa-eraser"></i> 
</button>

唯一的另一種方法是具有當按下按鈕的頁面重新加載，做哪個按鈕被按下的支票......

來源

2014-03-25 15:46:29

這是我正在尋找的，但它第一次工作（顯示清除按鈕），然後刪除它，但當我嘗試點擊應用按鈕再次清除按鈕閃爍然後隱藏。 – murday1983

因爲這[[小提琴]（http://jsfiddle.net/56Exs/）的作品...必須有其他的東西導致那麼... ... –

我不認爲這可以在不使用JavaScript/jQuery的使用jQuery ..來完成這是你正在尋找

$("#ApplyFilter").click(function(){ 
$("#ClearFilters").toggle(); 
    $(this).toggle(); 
}); 
$("#ClearFilters").click(function(){ 
$("#ApplyFilter").toggle(); 
    $(this).toggle(); 
});

什麼

檢查這個fiddle我做出來你的HTML。

來源

2014-03-25 15:39:28

你顯然沒有閱讀他對「我更喜歡o如果可能的話，不用java/jquery就可以做到這一點。「 – VtoCorleone

@AnanthanUnni：我在我的回答中提到它不可能在沒有腳本的情況下達到要求！或者是您對提問的用戶的評論？ –

@AnanthanUnni：好的..但是這應該發佈到問題上。 –

已經決定雖然隱藏'清除'按鈕將是一個'很高興'，它應該隨時顯示，並可能在將來的修復程序中隱藏它，一旦應用程序啓動並運行。

感謝所有的意見/幫助。

來源

2014-03-27 09:05:54 murday1983

隱藏一個「清除」按鈕，直到「應用」按鈕，點擊

回答

相關問題