Question

请参阅此网站：http://www.sensationsskin.com/site10/treatments/skin-care.html

我已经开始工作，但我希望“+”改为“ - ”（expandbutton-close.gif）。我现在正在使用CSS来提取图像，但我想我需要将它合并到JQuery代码中？

    <script type="text/javascript">
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function(){
if ( $(this).next(".msg_body").is(':visible') ) {
$(".msg_body").hide();
} else {
$(".msg_body").hide();
$(this).next(".msg_body").slideToggle(450);
}
});
});
</script>
<script type="text/javascript">
$("h2.msg_head").click(function() {
  var head = $(this);
  var body = head.next();
  if (body.is(":visible")) {
    head.css("backgroundImage", "url(images/expandbutton-close.gif)");
    body.slideDown();
  } else {
    head.css("backgroundImage", "url(images/expandbutton-open.gif)")
    body.slideUp();
  }
});
</script>

Answer 1

这应该这样做：

$("h2.msg_head").click(function() {
  var head = $(this);
  var body = head.next();
  if (body.is(":visible")) {
    head.css("backgroundImage", "url(images/expandbutton-close.gif)");
    body.slideDown();
  } else {
    head.css("backgroundImage", "url(images/expandbutton-open.gif)")
    body.slideUp();
  }
});

但是我倾向于建议不要直接设置CSS样式属性。类往往是一个更清晰，更灵活的解决方案，所以添加：

h2.msg_body { background-image: url(images/expandbutton-close.gif); }
h2.open { background-image: url(images/expandbutton-close.gif); }

然后执行：

$("h2.msg_head").click(function() {
  var head = $(this);
  var body = head.next();
  if (body.is(":visible")) {
    head.removeClass("open");
    body.slideDown();
  } else {
    head.addClass("open");
    body.slideDown();
  }
});

使用JQuery </div>一次切换1 <div>

1 个答案: