li元素

li元素

关注
发信
关注(28)粉丝(399)

javascript - 单击新的UL LI元素时，关闭/隐藏先前的UL LI元素

我需要你的帮助。

出于某种奇怪的原因，如果用户未在左侧框中进行选择，然后单击右侧框，则每个菜单都将保持打开状态。如何修改javascript代码，以便如果用户将焦点移到另一个框上，则前一个框返回其默认状态并打开下一个框？我已附上一张之前和之后的图片：

javascript - 单击新的UL LI元素时，关闭/隐藏先前的UL LI元素-LMLPHP

这是完整的HTML标记：

<!DOCTYPE html>

<html>

<head>

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

<script src="jquery-1.11.3.min.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.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')


    });

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

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


<table>

<tr>

<td>

<dl class="select">
    <dt><span id="vegetables"></span></dt>
    <dd>
        <ul>
            <li><a 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>

</td>

<td>
<dl class="select">
    <dt><span id="fruits"></span></dt>
    <dd>
        <ul>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">Apples</a></li>
            <li><a href="#">Oranges</a></li>
            <li><a href="#">Bananas</a></li>
        </ul>
    </dd>
</dl>

</td>
</tr>
</table>

</body>

</html>

最佳答案

加

    $('.select').not(select).find('ul').hide();


在$(".select dt").click处理程序中



演示版



$(document).ready(function() {

    $(".select dt").click(function(e) {
        e.stopPropagation();
        var select = $(this).closest('.select');
        // close all other selects
        $('.select').not(select).find('ul').hide();

        select.find('ul').toggle();
        select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')

        select.find("dt, span, dd ul").css('background-color', 'rgb(255,255,196)')


    });

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

        }
        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', '');
    });

});

* {
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<table>

<tr>

<td>

<dl class="select">
    <dt><span id="vegetables"></span></dt>
    <dd>
        <ul>
            <li><a 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>

</td>

<td>
<dl class="select">
    <dt><span id="fruits"></span></dt>
    <dd>
        <ul>
            <li><a href="#">&nbsp;</a></li>
            <li><a href="#">Apples</a></li>
            <li><a href="#">Oranges</a></li>
            <li><a href="#">Bananas</a></li>
        </ul>
    </dd>
</dl>

</td>
</tr>
</table>

关于javascript - 单击新的UL LI元素时，关闭/隐藏先前的UL LI元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35584437/

10-11 23:43
Powered by LMLPHP ©2024 li元素 0.033269