单击链接时显示div边框

Question

我试图弄清楚如何显示页脚上的顶部边框，一旦链接被点击在提到的页脚（它显示网站中的模式，而不是jsfiddle）。当链接再次被点击时，它也应该消失。一旦我应用display:none;这将触发js显示边框，一切都无法正常工作。任何帮助表示感谢，谢谢。

的jsfiddle：https://jsfiddle.net/0gtk60gz/

HTML

<footer class="border"> 
    <h1 id="linkone"> 
    <a href="http://www.google.com"> 
     test 
    </a> 
    </h1> 
    <h1 id="linktwo"> 
    <a href="http://www.google.com"> 
     test 
    </a> 
    </h1> 
</footer> 

CSS

footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    color:black; 
    background-color:blue; 
    padding:15px; 
} 

.border { 
    border-top:4px solid red; 
    /**display:none:**/ 
} 

h1,a { 
    color:white; 
} 

JS

$('h1.linkone') 
.on('click', function (event) { 
    $('.border').fadeIn(100); 

}) 
.on('click', function (event) { 
    $('.border').fadeOut(100); 
}); 


$('h1.linktwo') 
.on('click', function (event) { 
    $('.border').fadeIn(100); 

}) 
.on('click', function (event) { 
    $('.border').fadeOut(100); 
}); 

Answer 1

您需要将现有的JS代码更改为这一个。

$('h1').click(function(event) { 
    $('footer').toggleClass('border'); 
}); 

当您单击链接时，它将显示并隐藏边框。

如果您需要仅在链接被点击时而不是默认情况下显示边框，请不要忘记从footer标签中删除class="border"标签。

而且您还可以从.border中删除display: none，这是您评论过的。因为它会隐藏整个页脚，当然，如果你试图使用这个CSS属性来显示和隐藏border。

这里是工作codepen

UPD如果你想保留动画效果而无需改变现有的代码很多，你将需要：

1. 返回class="border"到footer
2. 将.toggle-border { border-top: 4px solid red;}添加到CSS样式

3. 将JS代码更新到这一个

   $('h1').click(function(event) { $('footer').toggleClass('toggle-border', 600, 'linear'); });

检查codepen，我已经更新了。此外，我已经将jquery-ui脚本添加到外部JS。

Answer 2

已分配到页脚类.border。因此，如果将display：none设置为页脚，则.border将不会显示任何内容... 要解决此问题，请在页脚周围封装div，并将类.border添加到该div。

Answer 3

如果你准备好像下面的代码一样改变你的html，它会帮助你使你的需求工作。

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1 /jquery.min.js"></script> 
<footer class="border"> 
<h1 id="linkone"> 
    <a href="http://www.google.com"> 
    test 
</a> 
</h1> 
    <h1 id="linktwo"> 
    <a href="http://www.google.com"> 
    test 
    </a> 
    </h1> 
</footer> 

CSS

<style type="text/css"> 
footer { 
position: absolute; 
left: 0; 
bottom: 0; 
width: 100%; 
color:black; 
background-color:blue; 
padding:15px; 
} 

.border { 
    border-top:4px solid red; 
/**display:none:**/ 
} 

h1,a { 
color:white; 
} 
</style> 

JS

<script> 
    $(document).ready(function() { 
    $("h1").click(function() { 
    console.log('ok'); 
    $('footer').toggleClass('border'); 
    }); 
    }); 

</script> 

你可以看到演示Here