OnClick的錨標籤的內容不應該顯示

Question

我有一個頭元素裏面有一個錨元素存在。以下是代碼：

<h3 class="header"><a href="http://www.google.com">Google</a></h3> 

單擊標題元素，一些文本顯示在下面。爲此，我使用了jQuery。以下是代碼：

$('.header').click(function() { 
    $header = $(this); 
    $anchor = $header.find("a"); 
    $content = $header.next();  // Get next element 
    $content.slideToggle(100, function() { 
    $content.is(":visible") ? $anchor.css({'color': 'white'}) : $anchor.css({'color': '#1818bd'}); 
    $content.is(":visible") ? $header.css({'background-color': 'black'}) : $header.css({'background-color': '#cccccc'}); 
    }); 
}); 

在錨點元素懸停時，文本變爲紅色。以下是代碼：

a:hover {color: red;} 

問題1：單擊錨點元素時，我不希望顯示下面的文本內容。這應該只發生在按預期發生的標題元素上。

問題2：點擊標題元素後，出現下面的文本內容。現在，如果將鼠標懸停在錨點元素上，文字顏色不會變爲紅色。

下面是JS提琴鏈接： https://jsfiddle.net/heisenberg_kl3/np5pmqLq/

問題2解決。請提供一個解決問題1.

Answer 1

變化：

使用Javascript（第1期）：

$('.header a').click(function(e) { 
    e.stopPropagation(); 
}); 

CSS（第2期）：

a:hover {color: red !important;} 

完整的解決方案：

$('.header').click(function() { 
 
\t $header = $(this); 
 
    $anchor = $header.find("a"); 
 
    $content = $header.next(); \t \t // Get next element 
 
    $content.slideToggle(100, function() { 
 
    \t $content.is(":visible") ? $anchor.css({'color': 'white'}) : $anchor.css({'color': '#1818bd'}); 
 
    \t $content.is(":visible") ? $header.css({'background-color': 'black'}) : $header.css({'background-color': '#cccccc'}); 
 
    }); 
 
}); 
 

 
$('.header a').click(function(e) { 
 
\t e.stopPropagation(); 
 
});

h3 { 
 
\t width: 84.7%; 
 
\t margin: 0; 
 
\t padding-top: 2px; 
 
\t padding-left: 10px; 
 
\t padding-bottom: 5px; 
 
    background: #cccccc; 
 
} 
 
a { 
 
    text-decoration: none; 
 
\t color: #1818bd; 
 
} 
 
a:hover {color: red !important;} 
 
.box { 
 
\t width: 85%; 
 
\t margin: 0; 
 
\t padding-top: 5px; 
 
\t padding-left: 5px; 
 
\t padding-bottom: 5px; 
 
\t border-style: solid; 
 
\t border-color: #336699; 
 
    border-width: 1px; 
 
    display: none; 
 
}

<div> 
 
    <h3 class="header"><a href="http://www.google.com">Google</a></h3> 
 
    <p class="box"> 
 
    Vist google for searching anything. 
 
    </p> 
 
</div> 
 
<br/> 
 
<div> 
 
    <h3 class="header"><a href="http://www.amazon.com">Amazon</a></h3> 
 
    <p class="box"> 
 
    Vist amazon for online shopping. 
 
    </p> 
 
</div> 
 
<br/> 
 
<div> 
 
    <h3 class="header"><a href="http://www.youtube.com">YouTube</a></h3> 
 
    <p class="box"> 
 
    Vist youtube to watch videos. 
 
    </p> 
 
</div>

Demo這裏

Answer 2

你最變化選擇：

$('.header a').click(function() { //header a 
    $header = $(this); 
    $anchor = $header.find("a"); 
    $content = $header.next();  // Get next element 
    $content.slideToggle(100, function() { 
    $content.is(":visible") ? $anchor.css({'color': 'white'}) : $anchor.css({'color': '#1818bd'}); 
    $content.is(":visible") ? $header.css({'background-color': 'black'}) : $header.css({'background-color': '#cccccc'}); 
    }); 
}); 

白色becouse你預定的CSS樣式。 你最改變你的選擇器和更改類。

更新。你的代碼是未來：

$(document).ready(function() { 
 

 
    $('.header').click(function() { 
 
    $header = $(this); 
 
    $anchor = $header.find("a"); 
 
    $content = $header.next(); \t \t // Get next element 
 
    $content.slideToggle(100, function() { 
 
     $header[$content.is(":visible") ? 'addClass' : 'removeClass']('visible') 
 
    }); 
 
    }); 
 

 
})

h3 { 
 
\t width: 84.7%; 
 
\t margin: 0; 
 
\t padding-top: 2px; 
 
\t padding-left: 10px; 
 
\t padding-bottom: 5px; 
 
    background: #cccccc; 
 
} 
 
a { 
 
    text-decoration: none; 
 
\t color: #1818bd; 
 
} 
 

 
.box { 
 
\t width: 85%; 
 
\t margin: 0; 
 
\t padding-top: 5px; 
 
\t padding-left: 5px; 
 
\t padding-bottom: 5px; 
 
\t border-style: solid; 
 
\t border-color: #336699; 
 
    border-width: 1px; 
 
    display: none; 
 
} 
 

 
.header.visible { 
 
    background-color: black; 
 
} 
 
.header.visible a { 
 
    color:white 
 
} 
 
a:hover,.visible a:hover {color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div> 
 
    <h3 class="header" class="visible"><a href="http://www.google.com">Google</a></h3> 
 
    <p class="box"> 
 
    Vist google for searching anything. 
 
    </p> 
 
</div> 
 
<br/> 
 
<div> 
 
    <h3 class="header"><a href="http://www.amazon.com">Amazon</a></h3> 
 
    <p class="box"> 
 
    Vist amazon for online shopping. 
 
    </p> 
 
</div> 
 
<br/> 
 
<div> 
 
    <h3 class="header"><a href="http://www.youtube.com">YouTube</a></h3> 
 
    <p class="box"> 
 
    Vist youtube to watch videos. 
 
    </p> 
 
</div>