更改活动div的背景颜色

Question

我创建了一个下拉菜单。我想更改活动范围标记的背景颜色，其中包含箭头图像。点击任何下拉选项，它应该关闭，该选项应该出现在菜单中。

示例： - 如果我点击选项'DROP ITEM 2'选项，它应该替换'ITEM NAME'。

jQuery(document).ready(function(e) {
  function t(t) {
    e(t).bind("click", function(t) {
      t.preventDefault();
      e(this).parent().fadeOut()
    })
  }
  e(".dropdown-toggle").click(function() {
    $("#rotate_sign").css({
      'background-color': 'green'
    });
    var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
    e(".button-dropdown .dropdown_menu").hide();
    e(".button-dropdown .dropdown-toggle").removeClass("active");
    if (t) {
      e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
    }
  });
  e(document).bind("click", function(t) {
    var n = e(t.target);
    if (!n.parents().hasClass("button-dropdown"))
      e(".button-dropdown .dropdown_menu").hide();
  });
  e(document).bind("click", function(t) {
    var n = e(t.target);
    if (!n.parents().hasClass("button-dropdown"))
      e(".button-dropdown .dropdown-toggle").removeClass("active");
  })
});

* {
  box-sizing: border-box;
}

body {
  background-color: #eee;
  text-align: center;
  padding-top: 50px;
}

.nav {
  display: block;
  font-family: 'PT Sans Caption', sans-serif;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  padding: 5px 0px 0px 0px;
}

.nav li {
  display: inline-block;
  list-style: none;
  width: 100%;
}

.nav .button-dropdown {
  position: relative;
}

.nav .button-dropdown .dropdown-toggle {
  display: block;
  padding: 0px 0px 0px 20px;
  text-decoration: none;
  font-family: 'PT Sans Caption', sans-serif;
  font-size: 7.5px;
  font-weight: bold;
  line-height: 2.33;
  letter-spacing: 0px;
  text-align: center;
  color: #666667;
}

.nav .button-dropdown .dropdown_items {
  display: block;
  padding: 10px 2px;
  text-decoration: none;
  font-family: 'PT Sans Caption', sans-serif;
  font-size: 7.5px;
  font-weight: bold;
  line-height: 2.33;
  letter-spacing: 0px;
  text-align: center;
  color: #666667;
  border-bottom: solid 0.5px #e4e4e4;
}

.border_bottom_none {
  border-bottom: solid 1px #ffffff;
}

.nav li a span {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  color: #999;
  height: 26.5px;
  background-color: #f3f3f3;
}

.dropdown_menu {
  z-index: 1000;
  float: left;
  /*min-width: 160px;*/
  font-size: 14px;
  list-style: none;
  border-radius: 1px;
}

.nav li .dropdown_menu {
  display: none;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  background-color: #f3f3f3;
  box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}

.nav li .dropdown_menu.active {
  display: block;
}

.nav li .dropdown_menu a {
  width: 90%;
  margin: auto;
}

div.custom-table {
  display: table;
  width: 100%;
}

div.custom-table-row {
  display: table-row
}

div.custom-table-cell {
  display: table-cell;
  padding: 3px;
}

.custom-table-row>.custom-table-cell {
  height: 35px;
  padding-bottom: 0px;
}

div.table-cell-data {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
}

div.table-cell-data.right-align {
  justify-content: flex-end;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
  border-bottom: 1px solid #cccccc;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
  width: 32px;
  height: 32px;
  margin: 0 5px;
  margin-right: 10px;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
  min-width: 5%;
  white-space: nowrap;
  border: none;
  vertical-align: middle;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
  width: 45%;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
  width: 25%;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
  width: 15%;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
  width: 10%;
}

.sign_rotate {
  height: 20px;
  width: 19px;
}

.sign_rotate img {
  width: 100%;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
  <div class="custom-table-row">
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <input type="checkbox" />
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
            
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 1
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 2
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">
                                                        Drop Item 3
                                                    </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 1
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 2
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">
                                                        Drop Item 3
                                                    </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 1
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 2
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">
                                                        Drop Item 3
                                                    </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data right-align">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 1
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items">
                                                        Drop Item 2
                                                    </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">
                                                        Drop Item 3
                                                    </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

将文本“item name”放在名为 e(".dropdown_menu").click(function(event){ e("#label1").text(event.target.textContent.trim()); }) 的id的范围内 并添加以下

jQuery(document).ready(function(e) {
  function t(t) {
    e(t).bind("click", function(t) {
      t.preventDefault();
      e(this).parent().fadeOut()
    })
  }
  e(".dropdown-toggle").click(function() {
    $("#rotate_sign").css({
      'background-color': 'green'
    });
    var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
    e(".button-dropdown .dropdown_menu").hide();
    e(".button-dropdown .dropdown-toggle").removeClass("active");
    if (t) {
      e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
    }
  });
  e(document).bind("click", function(t) {
    var n = e(t.target);
    if (!n.parents().hasClass("button-dropdown"))
      e(".button-dropdown .dropdown_menu").hide();
  });
  e(document).bind("click", function(t) {
    var n = e(t.target);
    if (!n.parents().hasClass("button-dropdown"))
      e(".button-dropdown .dropdown-toggle").removeClass("active");

  });
  e(".dropdown_menu").click(function(event) {
    e("#label1").text(event.target.textContent.trim());
      console.log(this);
  })
  e(".table-cell-data").click(function(ev){
  var that=this;
  e(".table-cell-data").each(function(){

  if(this.classList.contains("color_me") && this!=that){
  this.classList.remove("color_me");
  }

  })
    this.classList.add("color_me")
  })
});

下面的代码段

* {
  box-sizing: border-box;
}

body {
  background-color: #eee;
  text-align: center;
  padding-top: 50px;
}

.nav {
  display: block;
  font-family: 'PT Sans Caption', sans-serif;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  padding: 5px 0px 0px 0px;
}

.nav li {
  display: inline-block;
  list-style: none;
  width: 100%;
}

.nav .button-dropdown {
  position: relative;
}

.nav .button-dropdown .dropdown-toggle {
  display: block;
  padding: 0px 0px 0px 20px;
  text-decoration: none;
  font-family: 'PT Sans Caption', sans-serif;
  font-size: 7.5px;
  font-weight: bold;
  line-height: 2.33;
  letter-spacing: 0px;
  text-align: center;
  color: #666667;
}

.nav .button-dropdown .dropdown_items {
  display: block;
  padding: 10px 2px;
  text-decoration: none;
  font-family: 'PT Sans Caption', sans-serif;
  font-size: 7.5px;
  font-weight: bold;
  line-height: 2.33;
  letter-spacing: 0px;
  text-align: center;
  color: #666667;
  border-bottom: solid 0.5px #e4e4e4;
}

.border_bottom_none {
  border-bottom: solid 1px #ffffff;
}

.nav li a span {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  color: #999;
  height: 26.5px;
  background-color: #f3f3f3;
}

.dropdown_menu {
  z-index: 1000;
  float: left;
  /*min-width: 160px;*/
  font-size: 14px;
  list-style: none;
  border-radius: 1px;
}

.nav li .dropdown_menu {
  display: none;
  position: absolute;
  left: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  width: 100%;
  background-color: #f3f3f3;
  box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}

.nav li .dropdown_menu.active {
  display: block;
}

.nav li .dropdown_menu a {
  width: 90%;
  margin: auto;
}

div.custom-table {
  display: table;
  width: 100%;
}

div.custom-table-row {
  display: table-row
}

div.custom-table-cell {
  display: table-cell;
  padding: 3px;
}

.custom-table-row>.custom-table-cell {
  height: 35px;
  padding-bottom: 0px;
}

div.table-cell-data {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
}

div.table-cell-data.right-align {
  justify-content: flex-end;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
  border-bottom: 1px solid #cccccc;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
  width: 32px;
  height: 32px;
  margin: 0 5px;
  margin-right: 10px;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
  min-width: 5%;
  white-space: nowrap;
  border: none;
  vertical-align: middle;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
  width: 45%;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
  width: 25%;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
  width: 15%;
}

div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
  width: 10%;
}

.sign_rotate {
  height: 20px;
  width: 19px;
}

.sign_rotate img {
  width: 100%;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
  <div class="custom-table-row">
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <input type="checkbox" />
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
              <span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>

            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">Drop Item 1 </a>
              </li>
              <li>
                <a href="#" class="dropdown_items">Drop Item 2 </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">Drop Item </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">Drop Item 1 </a>
              </li>
              <li>
                <a href="#" class="dropdown_items">Drop Item 2 </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">Drop Item 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">Drop Item 1</a>
              </li>
              <li>
                <a href="#" class="dropdown_items">Drop Item 2 </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">Drop Item 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <div class="custom-table-cell">
      <div class="table-cell-data right-align">
        <ul class="nav">
          <li class="button-dropdown">
            <a href="javascript:void(0)" class="dropdown-toggle">
                                                STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                            </a>
            <ul class="dropdown_menu">
              <li>
                <a href="#" class="dropdown_items">Drop Item 1</a>
              </li>
              <li>
                <a href="#" class="dropdown_items">Drop Item 2 </a>
              </li>
              <li>
                <a href="#" class="dropdown_items border_bottom_none">Drop Item 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

{{1}}