1. 首頁
  2. 問答
  3. 更改活動div的背景顏色

更改活動div的背景顏色

2017-04-17 265 views
-2

我創建了一個下拉菜單。我想更改包含箭頭圖像的活動span標籤的背景顏色。點擊任何下拉選項後，它應該關閉，該選項應該出現在菜單中。更改活動div的背景顏色

例如： - 如果我點擊選項'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>

來源

2017-04-17 Bhaskar Saurabh Vicky

+0

您是否可以減少源代碼並只包含相關的源代碼？ – NewToJS

+3

爲您的代碼創建一個功能性示例，我們可能會爲您提供一個僅限CSS的修復程序。 – DontVoteMeDown

回答

1

地方文本 「項目名稱」 與名爲label1 ，並添加一個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>
以下 

e(".dropdown_menu").click(function(event){ 
    e("#label1").text(event.target.textContent.trim()); 
    })

片段

來源

2017-04-17 14:04:05 repzero

+0

你可以讓plzz使活動下拉菜單變成綠色？ –

+0

回答編輯.... – repzero

相關問題

 相關問題