单击 link 时显示 div 边框

Question

我想弄清楚如何在页脚上显示顶部边框，一旦在提到的页脚中单击 link（它在网站上显示模式，而不是 jsfiddle）。当再次单击 link 时，它也应该消失。一旦我应用 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

您已将 class .border 分配给页脚。所以如果你把 display: none 放到页脚，.border 也不会显示...... 要解决此问题，请将 div 包裹在页脚周围，然后将 class .border 添加到 div.

Answer 2

如果您准备像下面的代码那样稍微更改 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 3

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

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

点击link时显示和隐藏边框。

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

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

这是工作codepen

UPD如果想在不对现有代码进行大量改动的情况下保持动画效果，需要：

Return 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 脚本。

单击 link 时显示 div 边框

show div border when link is clicked

html

javascript

css

jquery

border