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;
}

所以马上就回去了＃34;回到项目＆＃34;隐藏，单击项目时出现，如果单击＆＃34;返回项目＆＃34;它再次隐藏起来。我尝试将display:none换成不透明度或可见度，但您仍然可以看到间距，如果＆＃34;返回项目＆＃34;还在那里。我设想了＆＃34;回到项目＆＃34;链接从右侧滑入，因为整个<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。

你能过渡显示属性吗？如果没有，那么最佳解决方案是什么？

1 个答案: