切换多个元素(li),但单击的元素除外

Question

li我的html代码中有多个元素是可折叠列表.我想切换li除了使用jQuery单击的元素之外的所有其他元素.

我的代码:

$(document).ready(function () {
    $("#boys").on('click', function () {
        $("#hacky").toggle();
        $("#walking1").toggle();
        $("#walking2").toggle();
        $("#walking3").toggle();
    });

    $("#hacky").on('click', function () {
        $("#boys").toggle();
        $("#walking1").toggle();
        $("#walking2").toggle();
        $("#walking3").toggle();
    });

    $("#walking1").on('click', function () {
        $("#boys").toggle();
        $("#hacky").toggle();
        $("#walking2").toggle();
        $("#walking3").toggle();
    });

    $("#walking2").on('click', function () {
        $("#boys").toggle();
        $("#hacky").toggle();
        $("#walking1").toggle();
        $("#walking3").toggle();
    });

    $("#walking3").on('click', function () {
        $("#boys").toggle();
        $("#hacky").toggle();
        $("#walking1").toggle();
        $("#walking2").toggle();
    });
});

我给每个li元素一个id,然后我切换它们.这不是最有效的方法,代码适用于静态文本.该li元素可以增加或减少,我想这样做是一种有效的方式,使得即使元素在将来添加我就不必每次添加一个ID和编写代码.我不知道如何有效地使用find()和this标记,我是jQuery的新手.

Editted:

HTML代码:

<div class="weekday-block">
  <ul class="collapsible roster-collapsible" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active roster-header">
        <h2>Tue 30 June,2015</h2>
      </div>
      <!-- /.collapsible-header -->
      <div class="collapsible-body main-collapsible">
        <ul class="multi-activity-wrapper collapsible-container">
          <li class="collapsible-wrapper" id="boys">
            <ul class="collapsible activity-collapsible" data-collapsible="accordion">
              <li class="activity-head">
                <div class="collapsible-header roster-header">
                  <h3>Boys's Basketball Meeting</h3>
                </div>
                <!-- /.collapsible-header -->
                <div class="collapsible-body">
                  <ul class="roster-activity">
                    <li>
                      <h4>Activity</h4>
                      <h3>CLUBS -> Athletic</h3>
                    </li>
                    <li>
                      <h4>Room</h4>
                      <h3>425</h3>
                    </li>
                    <li>
                      <h4>Capacity</h4>
                      <h3>5/25</h3>
                    </li>
                    <li>
                      <h3>Kevin Schieler</h3>
                    </li>
                  </ul>
                </div>
                <!-- /.collapsible-body -->
                <div class="activity-button-block roster-activity-button-block">
                  <input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Active">
                </div>
                <!-- /.activity-button-block -->
              </li>
            </ul>
          </li>
          <!-- /.collapsible-wrapper -->
          <li class="collapsible-wrapper" id="hacky">
            <ul class="collapsible activity-collapsible" data-collapsible="accordion">
              <li class="activity-head">
                <div class="collapsible-header roster-header">
                  <h3>Hacky Sack Club</h3>
                </div>
                <!-- /.collapsible-header -->
                <div class="collapsible-body">
                  <ul class="roster-activity">
                    <li>
                      <h4>Activity</h4>
                      <h3>CLUBS -> Athletic</h3>
                    </li>
                    <li>
                      <h4>Room</h4>
                      <h3>425</h3>
                    </li>
                    <li>
                      <h4>Capacity</h4>
                      <h3>5/25</h3>
                    </li>
                    <li>
                      <h3>Kevin Schieler</h3>
                    </li>
                  </ul>
                </div>
                <!-- /.collapsible-body -->
                <div class="activity-button-block roster-activity-button-block">
                  <input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
                </div>
                <!-- /.activity-button-block -->
              </li>
            </ul>
          </li>
          <!-- /.collapsible-wrapper -->
          <li class="collapsible-wrapper" id="walking1">
            <ul class="collapsible activity-collapsible" data-collapsible="accordion">
              <li class="activity-head">
                <div class="collapsible-header roster-header">
                  <h3>Walking Club</h3>
                </div>
                <!-- /.collapsible-header -->
                <div class="collapsible-body">
                  <ul class="roster-activity">
                    <li>
                      <h4>Activity</h4>
                      <h3>CLUBS -> Athletic</h3>
                    </li>
                    <li>
                      <h4>Room</h4>
                      <h3>425</h3>
                    </li>
                    <li>
                      <h4>Capacity</h4>
                      <h3>5/25</h3>
                    </li>
                    <li>
                      <h3>Kevin Schieler</h3>
                    </li>
                  </ul>
                </div>
                <!-- /.collapsible-body -->
                <div class="activity-button-block roster-activity-button-block">
                  <input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
                </div>
                <!-- /.activity-button-block -->
              </li>
            </ul>
          </li>
          <!-- /.collapsible-wrapper -->
          <li class="collapsible-wrapper" id="walking2">
            <ul class="collapsible activity-collapsible" data-collapsible="accordion">
              <li class="activity-head">
                <div class="collapsible-header roster-header">
                  <h3>Walking Club</h3>
                </div>
                <!-- /.collapsible-header -->
                <div class="collapsible-body">
                  <ul class="roster-activity">
                    <li>
                      <h4>Activity</h4>
                      <h3>CLUBS -> Athletic</h3>
                    </li>
                    <li>
                      <h4>Room</h4>
                      <h3>425</h3>
                    </li>
                    <li>
                      <h4>Capacity</h4>
                      <h3>5/25</h3>
                    </li>
                    <li>
                      <h3>Kevin Schieler</h3>
                    </li>
                  </ul>
                </div>
                <!-- /.collapsible-body -->
                <div class="activity-button-block roster-activity-button-block">
                  <input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
                </div>
                <!-- /.activity-button-block -->
              </li>
            </ul>
          </li>
          <!-- /.collapsible-wrapper -->
          <li class="collapsible-wrapper" id="walking3">
            <ul class="collapsible activity-collapsible" data-collapsible="accordion">
              <li class="activity-head">
                <div class="collapsible-header roster-header">
                  <h3>Walking Club</h3>
                </div>
                <!-- /.collapsible-header -->
                <div class="collapsible-body">
                  <ul class="roster-activity">
                    <li>
                      <h4>Activity</h4>
                      <h3>CLUBS -> Athletic</h3>
                    </li>
                    <li>
                      <h4>Room</h4>
                      <h3>425</h3>
                    </li>
                    <li>
                      <h4>Capacity</h4>
                      <h3>5/25</h3>
                    </li>
                    <li>
                      <h3>Kevin Schieler</h3>
                    </li>
                  </ul>
                </div>
                <!-- /.collapsible-body -->
                <div class="activity-button-block roster-activity-button-block">
                  <input type="button" onclick="window.location.href='javascript:void(0)'" id="button" class="waves-effect waves-light btn" value="Set as Active">
                </div>
                <!-- /.activity-button-block -->
              </li>
            </ul>
          </li>
          <!-- /.collapsible-wrapper -->
        </ul>
      </div>
      <!-- /.collapsible-body -->
    </li>
  </ul>
</div>
<!-- /.weekday-block -->

Answer 1

你可以这样做:

$("li").click(function () {
  $("li").not(this).toggle();
});

或者,您可以这样做:

$("li").click(function () {
  $("li").toggle();
  $(this).toggle(); // Retoggle
});

我刚刚添加了li目标作为这个概念的一个例子.实际上,您需要添加一个类作为要切换的特定<ul>元素的选择器,否则它将切换<li>页面上的所有元素.

这是一个例子:

$(".myList li").click(function () {
  $(".myList li").not(this).toggle();
});

Answer 2

1. 为所有<li>元素添加一个公共类
2. 使用公共类在元素上绑定事件
3. 使用this上下文并siblings()获取除单击之外的其他元素
4. toggle 兄弟元素
5. 我还建议您使用fadeToggle()或slideToggle()平滑动画

$(document).ready(function() {
  $('.myLis').on('click', function() {
    $(this).siblings('.myLis').slideToggle();
  });
});

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul>
  <li id="walking2" class="myLis">1</li>
  <li id="boys" class="myLis">2</li>
  <li id="hacky" class="myLis">3</li>
  <li id="walking1" class="myLis">4</li>
  <li id="walking3" class="myLis">5</li>
</ul>

UPDATE

在问题中添加HTML后

您可以使用以下来切换其他lis.您可以使用

// On click of the li
$('.collapsible-wrapper').on('click', function () {
    $('.collapsible-wrapper').not(this).slideToggle();
    // toggle li elements other than the clicked
});

Answer 3

您可以使用jquerys'极端简化此过程 this

$(".collapsible-wrapper").click(function(){
    $(".collapsible-wrapper").not(this).toggle();
});