показать границу 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'); 
}); 

Он отобразит и скроет границу, когда вы нажмете ссылку.

Также не забудьте удалить class="border" с отметки footer, если вам нужно показать границу только при нажатии ссылки, а не по умолчанию.

И вы также можете удалить display: none от .border, о котором вы прокомментировали. Потому что он скроет весь нижний колонтитул, конечно, если ваша попытка была использовать это свойство 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 назначенную сноске. Поэтому, если вы помещаете отображение: none в нижний колонтитул, то .border также не будет отображаться ... Чтобы обойти эту оболочку div вокруг нижнего колонтитула и добавить к этому div класс .border.

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