リンクがクリックされたときにdiv境界を表示する

Question

リンク先のフッターにリンクがクリックされると、フッタの上の境界線を表示する方法を理解しようとしています（jsfiddleではなくウェブサイトのモーダルを表示します）。また、リンクを再度クリックすると消えます。 jsに境界線を表示させるdisplay:none;を適用すると、すべてが機能しなくなります。どんな助力も感謝しています。

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

を見ることができます。

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

リンクをクリックすると、境界線が表示され、非表示になります。

class="border"をfooterタグから削除することを忘れないでください。リンクがクリックされたときにのみ表示する必要がある場合は、デフォルトでは表示されません。

また、.borderからdisplay: noneを削除することができます。コメントしました。 borderを表示したり隠したりするためにこのCSSプロパティを使用しようとした場合は、フッター全体を隠すことになります。既存のコードをたくさん変えずにアニメーション効果を維持したい場合はここで

が働いcodepen

UPDで、あなたがする必要があります：

1. 戻るclass="border"にfooter
2. CSSスタイルに.toggle-border { border-top: 4px solid red;}を追加する

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> 

あなたはこの1に既存のJSコードを変更する必要がデモHere