javascript - 一次只显示一个下拉项

Question

我需要修改 jquery 以便我一次只能打开一个列表项并且只想修改我的代码的现有版本

  $(document).ready(function() {
    $(".contacts ul li").on("click", function() {
      if ($(this).find("ul").css('display') == 'none') {
        $(this).find("ul").show();
        $(this, ".contacts ul li").addClass("selected")
      } else {
        $(this).find("ul").hide();
        $(this, ".contacts ul li").removeClass("selected")
      }

    });
  });

html,
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  font-family: 'Myriad Pro', Sans-serif;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.overlay {
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.contacts {
  position: fixed;
  top: 0;
  right: 0;
  width: 240px;
  height: 100%;
  border-left: solid 1px #111;
  background-color: #1a1a1a;
  overflow-y: scroll;
  padding-top: 51px;
}

.contacts h1 {
  font-size: 1.250em;
  font-weight: normal;
  padding: 15px;
  background-color: #1a1a1a;
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  width: inherit;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #131313;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3e3e3e+0,252525+100 */
  background: #3e3e3e;
  /* Old browsers */
  background: -moz-linear-gradient(top, #3e3e3e 0%, #252525 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #3e3e3e 0%, #252525 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #3e3e3e 0%, #252525 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3e3e3e', endColorstr='#252525', GradientType=0);
  /* IE6-9 */
  z-index: 9999;
}

.contacts ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.contacts ul li {
  padding: 15px;
  background-color: #1a1a1a;
  color: #565656;
  cursor: pointer;
}

.contacts ul li:nth-child(odd) {
  background-color: #212121;
}

.contacts ul li ul {
  margin: -15px;
  margin-top: 15px;
  display: none;
}

.contacts ul li ul li {
  background-color: #444 !important;
  cursor: default;
  color: #999 !important;
}

.contacts ul li:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border: solid 3px limegreen;
  display: inline-block;
  float: left;
}

.selected {
  background-color: #484848 !important;
  color: #fff !important;
}

.status {
  background-color: lightgreen;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 1px;
}

.offline {
  background-color: red !important;
}

.away {
  background-color: orange !important;
}

.mail {
  color: #00f6ff !important;
  text-decoration: underline;
}

.clearfix {
  clear: both;
}

@media only screen and (max-width: 768px) {
  .contacts {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
  <div class="contacts">
    <h1>Contacts</h1>
    <ul>
      <li>
        <div class="status"></div>Christian
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">christian@yahoo.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status offline"></div>Rich
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">rich@hotmail.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status away"></div>Dave
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">dave@tripod.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status"></div>Frank
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">frank@live.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status"></div>James
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">james@aol.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status"></div>Eddie
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">eddie@outlook.com</span></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

你需要像下面那样做:-

$(document).ready(function() {
  $(".contacts ul li").on("click", function() {
    $('.contacts ul li').removeClass('selected').children("ul").hide();
    $(this, ".contacts ul li").addClass("selected").children("ul").show();
  });
});

工作示例:-

$(document).ready(function() {
  $(".contacts ul li").on("click", function() {
    $('.contacts ul li').removeClass('selected').children("ul").hide();
    $(this, ".contacts ul li").addClass("selected").children("ul").show();
  });
});

html,
body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 14px;
  font-family: 'Myriad Pro', Sans-serif;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.overlay {
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.contacts {
  position: fixed;
  top: 0;
  right: 0;
  width: 240px;
  height: 100%;
  border-left: solid 1px #111;
  background-color: #1a1a1a;
  overflow-y: scroll;
  padding-top: 51px;
}

.contacts h1 {
  font-size: 1.250em;
  font-weight: normal;
  padding: 15px;
  background-color: #1a1a1a;
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  width: inherit;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #131313;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3e3e3e+0,252525+100 */
  background: #3e3e3e;
  /* Old browsers */
  background: -moz-linear-gradient(top, #3e3e3e 0%, #252525 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #3e3e3e 0%, #252525 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #3e3e3e 0%, #252525 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3e3e3e', endColorstr='#252525', GradientType=0);
  /* IE6-9 */
  z-index: 9999;
}

.contacts ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.contacts ul li {
  padding: 15px;
  background-color: #1a1a1a;
  color: #565656;
  cursor: pointer;
}

.contacts ul li:nth-child(odd) {
  background-color: #212121;
}

.contacts ul li ul {
  margin: -15px;
  margin-top: 15px;
  display: none;
}

.contacts ul li ul li {
  background-color: #444 !important;
  cursor: default;
  color: #999 !important;
}

.contacts ul li:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border: solid 3px limegreen;
  display: inline-block;
  float: left;
}

.selected {
  background-color: #484848 !important;
  color: #fff !important;
}

.status {
  background-color: lightgreen;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: 1px;
}

.offline {
  background-color: red !important;
}

.away {
  background-color: orange !important;
}

.mail {
  color: #00f6ff !important;
  text-decoration: underline;
}

.clearfix {
  clear: both;
}

@media only screen and (max-width: 768px) {
  .contacts {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay">
  <div class="contacts">
    <h1>Contacts</h1>
    <ul>
      <li>
        <div class="status"></div>Christian
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">christian@yahoo.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status offline"></div>Rich
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">rich@hotmail.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status away"></div>Dave
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">dave@tripod.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status"></div>Frank
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">frank@live.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status"></div>James
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">james@aol.com</span></li>
        </ul>
      </li>
      <li>
        <div class="status"></div>Eddie
        <ul>
          <li><strong>Phone</strong>: 555.555.555</li>
          <li><strong>Email</strong>: <span class="mail">eddie@outlook.com</span></li>
        </ul>
      </li>
    </ul>
  </div>
</div>