带有类选择器的 Jquery 按钮在 chrome/firefox 中不起作用

Question

我在一个页面上有多个按钮，单击每个按钮时，我将显示无序列表并将单击的按钮颜色更改为灰色，并将页面中的其余按钮更改为白色。下面的代码在 IE 中有效，但在 chrome/Firefox/safari 中无效。

基本上，我将 jquery 选择器用于具有类名的按钮元素，该元素基本上会将所有按钮绘制为白色，然后将单击的按钮绘制为灰色。

$('button.o365button').css('background-color', 'white  !important');

我认为上述声明似乎不适用于 chrome/firefox/safari。知道为什么这不起作用。

下面是完整的工作代码

$(document).ready(function() {

  $('.o365button').on('click', function(event) {
    //hide all the sub menus on page loaded
    $('.childHeaders').hide();

    //Open the submenu that was clicked				
    $(this).next(".childHeaders").toggle();

    //Change all button colors to white
    $('button.o365button').css('background-color', 'white  !important');

    //Change the clicked button to grey
    this.style.setProperty('background-color', '#d8d8d8', 'important');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="menu">
    		<div class="o365cs-nav-topItem">			
    			<button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Products" role="menuitem" aria-haspopup="true" style="background-color: white !important;" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Products</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav" style="width: 720px;">
      <ul id="Sco5">
        <li id="5"><a style="font-weight: bold;">Scorecards/Dashboards</a></li>
      </ul>
  </div>
</div>

<div class="o365cs-nav-topItem">
  <button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Support" role="menuitem" aria-haspopup="true" style="background-color: white !important;" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Support</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav">
      <ul id="Use31">
        <li id="31"><a href="https://unicef-insight1.uservoice.com/" target="_blank">User Support Portal</a>
      </ul>
  </div>
</div>
</span>
</div>

IE

火狐/Chrome

Answer 1

只需删除 !important 和 important，您的代码也可以在 Firefox/chrome 中正常工作：-

工作示例：-

$(document).ready(function() {

  $('.o365button').on('click', function(event) {
    //hide all the sub menus on page loaded
    $('.childHeaders').hide();

    //Open the submenu that was clicked				
    $(this).next(".childHeaders").toggle();

    //Change all button colors to white
    $('button.o365button').css('background-color', '#ffffff');

    //Change the clicked button to grey
    $(this).css('background-color', '#d8d8d8');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="menu">
    		<div class="o365cs-nav-topItem">			
    			<button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Products" role="menuitem" aria-haspopup="true" style="background-color: white !important;" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Products</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav" style="width: 720px;">
      <ul id="Sco5">
        <li id="5"><a style="font-weight: bold;">Scorecards/Dashboards</a></li>
      </ul>
  </div>
</div>

<div class="o365cs-nav-topItem">
  <button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Support" role="menuitem" aria-haspopup="true" style="background-color: white !important;" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Support</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav">
      <ul id="Use31">
        <li id="31"><a href="https://unicef-insight1.uservoice.com/" target="_blank">User Support Portal</a>
      </ul>
  </div>
</div>
</span>
</div>

Answer 2

您为什么使用两种不同的方式来更改 CSS。只需更改类并从按钮中删除样式 - 你甚至不需要重要的

PS：你不能将 div 包裹在 span 中

$(document).ready(function() {
  $('button.o365button').addClass("white").removeClass("grey")

  $('.o365button').on('click', function(event) {
    //hide all the sub menus on page loaded
    $('.childHeaders').hide();
    $('button.o365button').addClass("white").removeClass("grey");

    //Open the submenu that was clicked				
    $(this).next(".childHeaders").toggle();

    $(this).removeClass("white").addClass("grey");

  });
});

.white {
  background-color: white;
}

.grey {
  background-color: #d8d8d8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="menu">
    		<div class="o365cs-nav-topItem">			
    			<button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Products" role="menuitem" aria-haspopup="true"  aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Products</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav" style="width: 720px;">
      <ul id="Sco5">
        <li id="5"><a style="font-weight: bold;">Scorecards/Dashboards</a></li>
      </ul>
  </div>
</div>

<div class="o365cs-nav-topItem">
  <button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Support" role="menuitem" aria-haspopup="true" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Support</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav">
      <ul id="Use31">
        <li id="31"><a href="https://unicef-insight1.uservoice.com/" target="_blank">User Support Portal</a>
      </ul>
  </div>
</div>
</span>
</div>

Answer 3

$(document).ready(function() {

  $('.o365button').on('click', function(event) {
    //hide all the sub menus on page loaded
    $('.childHeaders').hide();

    //Open the submenu that was clicked				
    $(this).next(".childHeaders").toggle();

    //Change all button colors to white
    $('button.o365button').not(this).css({'background-color':'white'});

    //Change the clicked button to grey
    $(this).css({'background-color':'grey'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
  <span class="menu">
    		<div class="o365cs-nav-topItem">			
    			<button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Products" role="menuitem" aria-haspopup="true" style="background-color: white !important;" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Products</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav" style="width: 720px;">
      <ul id="Sco5">
        <li id="5"><a style="font-weight: bold;">Scorecards/Dashboards</a></li>
      </ul>
  </div>
</div>

<div class="o365cs-nav-topItem">
  <button class="o365button o365cs-nav-item o365cs-nav-button o365cs-topnavText ms-bgc-tdr-h" id="Support" role="menuitem" aria-haspopup="true" style="background-color: white !important;" aria-label="Opens the Settings menu" type="button"><span class="wf wf-size-x18 wf-family-o365 menustyle" role="presentation" style="font-size: 18px; vertical-align: middle; display: inline-block;">Support</span></button>
  <div class="childHeaders" style="display:none;">
    <ul class="subnav">
      <ul id="Use31">
        <li id="31"><a href="https://unicef-insight1.uservoice.com/" target="_blank">User Support Portal</a>
      </ul>
  </div>
</div>
</span>
</div>