JavaScript POST请求成功后如何实现导航项的隐藏与显示？

实现方案 #

第一步：默认隐藏第4个导航项 #

在你的HTML代码中，给第4个nav-item添加隐藏属性，如果你使用Bootstrap框架，直接加d-none类即可，没有的话加内联样式display: none，修改后的代码如下：

<li class="nav-item disabled d-none" role="presentation">
    <a class="nav-link text-active-primary me-6" id="services-tab" data-toggle="tab"
       href="#services" role="tab" aria-controls="messages" aria-selected="false">Freight Services</a>
</li>

小提示：你原代码里第4个导航项的a标签id写错成了aervices-tab，且文本前多了一个多余的>符号，上面代码已经修正。

第二步：修改JS请求逻辑，成功后展示导航项 #

在POST请求的success回调中，添加移除隐藏类、取消禁用的逻辑即可，修改后的JS代码如下：

$(document).on('click', 'button[data-wizard-type="action-submit"]', function (e){
    e.preventDefault();
    let wizardData = $("#freight_form").serialize();
    console.log(wizardData);
    $.post({
        url: "{{ route('warehouse.shipping.post_shipping_data') }}",
        data: "order_number={{$order_details->order_number}}&" + wizardData,
        success: function(result){
            const obj = JSON.parse(result);
            console.log(obj.availableFreightServices);
            // 新增：显示第4个导航项，取消禁用
            $('#services-tab').parent()
                .removeClass('d-none') // 如果用的是内联display:none，就改成.css('display', 'list-item')
                .removeClass('disabled');
            
            // 这里可以继续写把返回的选项填充到第4个导航项对应内容区的逻辑
            Swal.fire({
                position: "top-right",
                icon: "success",
                title: "Your work has been saved",
                showConfirmButton: false,
                timer: 1500
            });
        }
    })
});

可选兼容方案 #

如果你没有使用Bootstrap的工具类，把上面HTML部分的d-none换成style="display: none;"，再把JS里的removeClass('d-none')换成.css('display', 'list-item')即可。

内容的提问来源于stack exchange，提问作者Lachlan Young