javascript - 你能转换显示属性吗？如果没有，最好的解决方案是什么？

Question

我正在尝试对列表项进行转换:

HTML

<ul>
   <li class="resume"><a href="#" target="_blank"><i class="fa fa-file-text-o"></i> Resumé</a></li>
   <li><a href="#" target="_blank"><i class="fa fa-instagram"></i> Bio</a></li>
   <li id="backtoprojects" class="is-hidden"><a href="#" data-type="projectDie" ><i class="fa fa-close"></i> Back to Projects</a></li>
</ul>

Javascript

$('#backtoprojects').removeClass('is-hidden');

// hide back-to-projects-button on click of "backtoproject"
$('#backtoprojects a').on('click', function(){
   hasher.setHash();
   $('#backtoprojects').addClass('is-hidden');
});
$('[data-type="projectDie"]').click(function() {

        $('body').removeClass('projectLoaded');

        return false;

    })

;

CSS

.navbar ul li.is-hidden {
    display: none;
}

因此，“返回元素”立即被隐藏，单击元素时它会出现，如果您再次单击“返回元素”，它会自行隐藏。我尝试交换 display:none不透明度或可见性，但您仍然可以看到间距，就好像“返回元素”仍然存在一样。我设想“返回元素”链接从右侧滑入整个 <ul>。是float: right .

Answer 1

尝试这样的事情:

$('#backtoprojects').hide();
$('a').on('click', function(){
    $('#backtoprojects').show('slow');
});
$('#backtoprojects').on('click', function(){
    $(this).hide('slow');
});

完整代码在这里:https://jsfiddle.net/hdbj2rec/1/

或者您可以使用 CSS 最初隐藏 #backtoprojects。