0

这是带有 href 的下拉功能的代码。当我在下拉列表中选择一个项目时，应该会出现一个刻度线图标。当我单击 href 时，页面加载并且选择消失了。即使在重新加载后，有没有办法使可见性状态保持不变？

$('#submitDropdown > a').click(function(e) {
  event.preventDefault();
  $('#submitDropdown  > a').removeClass('selected');
  $(this).addClass('selected');
});

$('#sort_descend > a').click(function(e) {
  event.preventDefault();
  $('#sort_descend  > a').removeClass('selected');
  $(this).addClass('selected');
});
#submitDropdown>a>.fas {
  visibility: hidden;
}

#submitDropdown>a.selected>.fas {
  visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="submitDropdown" class="dropdown-content " style="width: 180px;">
  <a  class="dropdown-item borderbottom " href="@Url.AddQueryString(Request.RawUrl, "Modes", "All" )">
    @T("All")  
    <i class="fas fa-check pull-right"></i> 
  </a>
  <a class="dropdown-item" href="@Url.AddQueryString(Request.RawUrl, "Modes", "Current" )">
    @T("Current") 
    <i class="fas fa-check pull-right"></i>
  </a>
  <a class="dropdown-item" href="@Url.AddQueryString(Request.RawUrl, "Modes", "For" )">
    @T("For") 
    <i class="fas fa-check pull-right"></i> 
  </a>
</div>

4

1 回答 1

0

您可以使用 localStorage 或 Session 存储：以下是本地存储的实现。

$('#submitDropdown > a').click(function(e) {
  event.preventDefault();
  $('#submitDropdown  > a').removeClass('selected');
  $(this).addClass('selected');
  localStorage.setItem('submitDropdown', 'selected');
});

$('#sort_descend > a').click(function(e) {
  event.preventDefault();
  $('#sort_descend  > a').removeClass('selected');
  $(this).addClass('selected');
  localStorage.setItem('sort_descend', 'selected');
});

这将允许您为每个项目设置标志。供您参考的链接：https ://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

刷新页面后，您可以在从本地存储读取后添加“选定”类。

$( document ).ready(function() {
 if(localStorage.getItem('submitDropdown') === 'selected'){
   $('#sort_descend  > a').addClass('selected');
 }
});
于 2020-11-24T11:58:16.067 回答