如何永久显示 style="display:none" div 元素？

Question

我想使用 jQuery show() 函数在 anchor tag 的 click 上显示 display:none 元素。

但它暂时显示了div 元素然后消失了我使用return false 和preventDefault 函数，但它停止了锚标记的重定向到某个页面。

我该如何解决这个问题？

  <div id="assetlist" style="display:none">
                    @{
                        Html.RenderPartial("~/Views/Asset/_Asset_List.cshtml");
                    }
                    <!-- /.sidebar-menu -->
                </div>

    <script>
    $(document).ready(function () {
    $(".asset_managment").click(function(){
        $("#assetlist").show();
    });

});
</script>

    <li class="nav-link" >
        <a href="@Url.Action("Index", "Asset")" class="asset_managment">
            <img class="img_position" src="@Url.Content("~/admin-lte/img/asset_managment_icon.png")" width="50" height="50" />    Asset Managment
        </a>
    </li>

Answer 1

你能不能试试：

 $(document).ready(function () {
    $(".asset_managment").click(function(){
        $("#assetlist").attr('style', 'display:block !important');
    });

});

这只会覆盖 div 的内联样式的 display 属性。希望这会有所帮助

Answer 2

你可以这样做

$(document).ready(function() {
    $(".asset_managment").on('click', function(e) {
        e.preventDefault();
        $("#assetlist").show();
    });
});

<div id="assetlist" style="display:none">
    Show me
</div>

<li class="nav-link" >
    <a href="anything" class="asset_managment">
        click me
    </a>
</li>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>