单击链接时显示div边框

Question

I'm trying to figure out how to show the top border on a footer, once a link is clicked in mentioned footer (it shows a modal in the website, not the jsfiddle). It should also disappear when the link is clicked again. Once I apply the display:none; which would trigger the js to show the border, everything fails to function. Any help appreciated, thanks.

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

If you are ready to change your html little bit like the below code it will help you to make your requirement working.

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>

You can see the demo Here

Answer 2

You have the class .border assigned to the footer. So if you put display: none to the footer, the .border won't show either... To work around this wrap a div around the footer and add the class .border to that div.

Answer 3

You need to change the existing JS code to this one.

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

It will show and hide the border when you click the link.

Also do not forget to remove class="border" from footer tag, if you need to show border only when the link is clicked and not by default.

And you can also remove display: none from .border , which you commented. Because it will hide the whole footer, of course, if your attempt was to use this CSS property for showing and hiding border .

Here is the working codepen

UPD If you want to keep the animation effect without changing the existing code a lot, you will need to:

1. Return class="border" to footer
2. Add .toggle-border { border-top: 4px solid red;} to CSS styles

3. Update JS code to this one

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

Check the codepen, I've updated it. Also I've added jquery-ui script to external JS.