如何同时切换背景颜色和滑动切换？

Question

如何同时切换背景颜色和滑动切换？

3

我希望能够在点击时切换background-color和slideToggle。我还希望在所有按钮上都有悬停效果。但是，我的悬停效果在第一次点击后停止工作。另外，我还没有找到一个好的方法来切换background-color，就像你在我的代码中看到的那样。

这是我的jsfiddle。如果同一个按钮被点击两次，则此JavaScript代码无法正常工作：

$('#11').show().css({'background-color':'#cccccc'});
$('#22,#33,#44,#55,#66').show().css({'background-color':'white'});

此外，如果您有任何关于如何使我的JavaScript代码更加简洁/短小的建议，我很想看到它们。

- John

3

这应该打上 jQuery 的标签。 - roberto tomás

刚刚添加了那个。谢谢。 - John

3个回答

1

"另外，如果你对如何简化/缩短我的javascript代码有任何建议，我很乐意听取。"

"你不需要为每个新的函数/对象重复写$(document).ready(function(){})。一个$(document).ready(function(){})可以存储所有的javascript/jquery代码。这将大大缩短你的代码并使其更加整洁。"

"就像我在这里做的一样: https://jsfiddle.net/yLr5equc/3/"

- D.Soderberg

谢谢！我没意识到我可以这样做。 - John

1

由于CSS中定义的样式被jQuery添加的内联样式覆盖，因此在.button:hover中，将!important添加到background-color，使其优先级最高。

.button:hover {
  background-color: #e6e6e6 !important;
  cursor: pointer;
}

更新的解决方案: https://jsfiddle.net/yLr5equc/17/

不再使用!important，如我之前所述。我为.button创建了类.selected，并切换它而不是在内联样式中插入。

.button.selected {
  background-color: #ccc;
}

我已经重构了脚本，现在更短且更有效。

$(document).ready(function() {
  $(".button").on("click", function() {
    var $this = $(this),
        $next = $(this).next(".slide");
    if($next.hasClass("opening")) {
      $this.removeClass("selected");
      $next.slideUp("fast").removeClass("opening");
    } else {
      $this.addClass("selected");
      $this.siblings().removeClass("selected");
      $next.slideDown("fast").addClass("opening");
      $next.siblings(".slide").slideUp("fast").removeClass("opening");
    }
  });
});

- Nhan

谢谢！那个问题已经解决了。有没有关于如何切换背景的建议？ - John

@John 当关闭时，它会恢复为白色吗？ - Nhan

不，如果您单击按钮关闭它，则较暗的背景颜色不会消失。仅当您单击另一个按钮时，较暗的背景才会消失。 - John

1

太棒了，关于.next(SELECTOR)我没有意识到，一直在使用.next().next()...我要不要无耻地借鉴这个改进呢？ - roberto tomás

目前，如果幻灯片1是打开的，并且我单击幻灯片1以关闭它，它将关闭，但是暗背景仍然存在... - John

实际上仔细看，那个选择器并不像我想的那样有效。 - roberto tomás

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- roberto tomás · Accepted Answer

稍作整理，您就可以大大简化这个过程：

jQuery

$(document).ready(function(){
  $('.button')
  .on('click', function () {

    $('.button').not(this)
      .removeClass('selected')

    $('p.displayed').not($(this).next().next())
      .slideUp()
      .removeClass('displayed')

    $(this)
      .toggleClass('selected')
      .next(/*br*/).next(/*p*/)
        .slideToggle()
        .addClass('displayed')
  })

});

css

button.selected {
  background-color: #ccc;
}

来源: https://jsfiddle.net/yLr5equc/14/（抱歉，一开始我忘记隐藏之前的slideDown..现在已经解决了）