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() {
	$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'});
  });
});

$('.header a').click(function(e) {
	e.stopPropagation();
});

h3 {
	width: 84.7%;
	margin: 0;
	padding-top: 2px;
	padding-left: 10px;
	padding-bottom: 5px;
  background: #cccccc;
}
a {
  text-decoration: none;
	color: #1818bd;
}
a:hover {color: red !important;}
.box {
	width: 85%;
	margin: 0;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	border-style: solid;
	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'});
  });
});

白色因为你预定的CSS风格。你最常改变选择器并改变你的等级。

<强>更新即可。您的代码是下一个：

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

h3 {
	width: 84.7%;
	margin: 0;
	padding-top: 2px;
	padding-left: 10px;
	padding-bottom: 5px;
  background: #cccccc;
}
a {
  text-decoration: none;
	color: #1818bd;
}

.box {
	width: 85%;
	margin: 0;
	padding-top: 5px;
	padding-left: 5px;
	padding-bottom: 5px;
	border-style: solid;
	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>

OnClick锚标签不应显示内容

2 个答案: