聚焦元素时更改span和ul的背景颜色？

Question

我真的需要你的帮助，

当该元素成为焦点时，如何更改span和ul的背景颜色？ （由用户单击吗？）这是所需效果的前（左）和后（右）视觉表示：

这是HTML，CSS和jQuery：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="jquery-1.11.3.min.js"></script>

<script src="IE11support.js"></script>

<style type="text/css">
* {
  font-family: Segoe UI;
  font-size: 9pt;
}
.select {
  margin: 0;
  padding: 0;
}
.select dd, .select dt, .select ul {
  margin: 0px;
  padding: 0px;
}
.select dd {
  position: relative;
}
.select a, .select a:visited {
  color: #000;
  text-decoration: none;
  outline: none;
}
.select dt:hover, .select dd ul:hover {
  border-color: rgb(128,128,128);
}
.select dd ul li a:hover {
  background-color: rgb(112, 146, 190);
  color: #FFF;
}
.select dt {
  background: url(arrow.png) no-repeat scroll right center;
  display: block;
  padding-right: 20px;
  border: 1px solid rgb(170, 170, 170);
  width: 180px;
  overflow: hidden;
}
.select dt span {
  cursor: pointer;
  display: block;
  padding: 4px;
  height: 15px;
}
.select dd ul {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid rgb(170, 170, 170);
  border-left: 1px solid rgb(170, 170, 170);
  border-right: 1px solid rgb(170, 170, 170);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: -1px;
  width: auto;
  min-width: 200px;
  list-style: none;
}
.select dd ul li a {
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
}
.selected {
  background: rgb(195, 195, 195);
}
.header-list, .header-list:hover {
  padding-left: 3px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

    $(".select dt").click(function(e) {
        e.stopPropagation();
        var select = $(this).closest('.select');
        select.find('ul').toggle();
        select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')
    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');

        if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
            e.stopPropagation()
            $(this).addClass('selected');
            select.find('dt span').html("(" + select.find('a.selected').length + ")");
            //select.find('dt span').html(get_data_array(select.find('dd ul').attr('id')).join(",")) Comma-Seperated List
        }
        else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');
            select.find("dt span").html(text);
            //select.find("dt a").css("background-color", "");
            select.find("dd ul").hide();
        }
    });

    $(document).bind('click', function() {
        $(".select dd ul").hide();
        $(".select dt, .select dd ul").css('border-color', '');
    });

});
</script>

</head>

<body>

        <dl class="select">
        <dt><span id="vegetables"></span></dt>
        <dd>
            <ul>
                <li><a data-val="" href="#">&nbsp;</a></li>
                <li><a href="#">Carrots</a></li>
                <li><a href="#">Celery</a></li>
                <li><a href="#">Brocoli</a></li>
            </ul>
        </dd>
    </dl>

</body>

</html>

Answer 1

使元素具有焦点：

<dl tabindex="-1" class="select"><!-- if you want it to have
    a real tab index you can set it to another number -->
    <dt><span id="vegetables"></span></dt>
    <dd>
        <ul>
            <li><a data-val="" href="#">&nbsp;</a></li>
            <li><a href="#">Carrots</a></li>
            <li><a href="#">Celery</a></li>
            <li><a href="#">Brocoli</a></li>
        </ul>
    </dd>
</dl>

然后，在CSS中使用：focus

.select:focus {
    outline: 0; /* if that matters */
    background-color: yellow;
}

Answer 2

您可能只需要向容器添加一个类。

$('ul').on('click', function(){
  $('.select').toggleClass('active');
})

在你的CSS中

.select.active > span {
  background-color: 'yellow';
}

聚焦元素时更改span和ul的背景颜色？

问题描述

2 个解决方案

解决方案1
5 已采纳 2016-02-22 17:24:39

解决方案2
1 2016-02-22 17:20:54

聚焦元素时更改span和ul的背景颜色？

问题描述

2 个解决方案

解决方案1 5 已采纳 2016-02-22 17:24:39

解决方案2 1 2016-02-22 17:20:54

解决方案1
5 已采纳 2016-02-22 17:24:39

解决方案2
1 2016-02-22 17:20:54