stackoom
  简体   繁体   中英

Closing/Hiding previous UL LI element when a new UL LI element is clicked on

 原文  2016-02-23 17:39:26  5   1    javascript/ jquery/ html/ css/ css3

Question

I need your help.

For some strange reason it appears that if the user does not makes a selection in the left box and then clicks on the right box then both menus are left open per say. How can the javascript code be modified such that if the user moves the focus to another box that the previous box returns to its default state and the next box is opened? I have attached a before and after picture:

在此处输入图片说明

Here is the complete HTML Markup: 

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

1 answers

solution1
 1 ACCPTED  2016-02-23 17:47:50

Add 

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

in the $(".select dt").click handler

Demo 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Hiding an <li> element in a <ul> Move 'ul' element into the previous adjacent 'li'` element Trying to select previous li element of selected li element of ul Adding new <li> element into <ul> Questions add ul to a li element in an existing ul UL LI click is hiding the UL select li element based on the ul Closing UL LI Tabs and moving to the previous tab How do I know which <li> element was clicked from a <ul>? UL LI Element autoscroll when clicking Up and Down buttons jQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM