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

Firefox / 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

＆＃13;

$(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");

  });
});

＆＃13;

.white {
  background-color: white;
}

.grey {
  background-color: #d8d8d8;
}

＆＃13;

<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>

＆＃13;

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>

具有类选择器的Jquery按钮在chrome / firefox

3 个答案: