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

如果您准备好像下面的代码那样改变您的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

Answer 2

您已将类.border分配给页脚。因此，如果你将display：none放到页脚，那么.border也不会显示... 要解决此问题，请在页脚周围添加div，并将类.border添加到该div。

Answer 3

您需要将现有的JS代码更改为此代码。

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

单击链接时，它将显示和隐藏边框。

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

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

这是工作codepen

UPD 如果您希望在不更改现有代码的情况下保持动画效果，则需要：

将class="border"返回footer
将.toggle-border { border-top: 4px solid red;}添加到CSS样式
将JS代码更新为此

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

检查codepen，我已经更新了。我还在外部JS中添加了jquery-ui脚本。

单击链接时显示div边框

3 个答案: