Question

波纹管代码确实有效，但是一旦打开一个项目，只能通过打开另一个项目来关闭它。我希望这种情况发生，但如果我能通过点击自己来关闭联系人，我也会更喜欢它。

delete

Answer 1

当您仅针对直接孩子时，请务必在选择器中使用>。由于您有嵌套的li元素，这确实有所不同：没有>，当您单击内部li元素时，您的点击处理程序将运行两次。

其次，您应该初始化DOM，以便selected类的存在与嵌套的ul元素的可见性之间保持一致。

最后，您可以检查点击的li是否已被选中，具体取决于您是否可以隐藏所有嵌套的ul元素，或隐藏所有已点击的ul子元素以外的所有元素元件。

你可以这样做：

＆＃13;

$(document).ready(function() {
  $('.contacts>ul>li>ul').hide(); // Initialise

  $(".contacts>ul>li").on("click", function() {
    var alreadyOpen = $(this).is(".selected"); // get current status
    $('.contacts>ul>li').removeClass('selected').children("ul").hide();
    if (!alreadyOpen) { // depending on what status was, show 
      $(this).addClass("selected").children("ul").show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contacts">
    <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>
            <li><strong>Address</strong>: 6539 Wilton Ave, Culver City CA 90234</li>
          </ul>
        </li>
        <li>
          <div class="status"></div> Rich
          <ul>
            <li id="phone2"><strong>Phone</strong>: 555.555.555</li>
            <li id="email2"><strong>Email</strong>: <span class="mail">rich@tripod.com</span></li>
            <li id="address2"><strong>Address</strong>: 6539 Wilton Ave, Culver City CA 90234</li>
          </ul>
        </li>
    </ul>
</div>

＆＃13;

Answer 2

在SO的礼节上不确定这类问题（你没有提到你所尝试的内容，也不知道你自己在寻找答案时遇到的问题），不过这是我的答案。

基本上，您只需使用打开项目时添加的类。

像这样：

$(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();
  });
  // use the class itself to determine if the item is opened
  $(".contacts ul li.selected").on("click", function() {
    $(this, ".contacts ul li").removeClass('selected').children("ul").hide();
  });
});

第二个想法我不确定你的代码是否有效。我已根据您的代码编写了上面的代码，试图尽可能少地更改您当前的代码。

打开后无法关闭ul项目

2 个答案: