Question

我写了一些控制单元，通过使用＆＃34; collapse＆＃34;来切换几个容器。来自bootstrap的类，带有对我的隐藏容器特殊的锚点＃34; href＆＃34;属性，这是可以描述行为的两个列表元素的示例：

<div id="my_list">
  <ul>
  <li class="active">
    <a onclick="return false" data-parent="#switch_tables" href="#collapse1">One</a>
  </li>
  <li>
    <a onclick="return false" data-parent="#switch_tables" href="#collapse2">Two</a>
 </li>
</div>

然后在html代码中我使用了一些容器：

<div id="switch_tables" class="panel">
    <div id="collapse1" class="collapse in"> SOME IN HERE </div>
    <div id="collapse2" class="collapse"> SOMETHING ELSE</div>
</div>

因此，当我使用这些东西并且列表的第一个elemet处于活动状态时，第一个容器也会显示，因为我在＆＃34;中添加了＃34;课后＆＃34;崩溃＆＃34;类。当我切换到另一个列表元素时，第一个容器应该消失，第二个应该显示。当然，我有更多的列表链接和更多隐藏的容器，而不仅仅是2，但它只是一个例子。我想要做的是防止默认行为，并通过点击它来禁止活动的elemet隐藏。

所以我切换了＆＃34;活动＆＃34; list元素通过单击列表项并显示或隐藏具有列表所具有相同id的精确容器，因此容器与列表项链接，这是由js代码完成的：

$(function(){
    $('ul li a').on('click', function(){
        $(this).parent().addClass('active').siblings().removeClass('active');

        var to_toggle = $(this).attr('href');
        $('.collapse.in').collapse('hide');
        $(to_toggle+':not(".in")').collapse('show');
    });
});

现在我看到当我在列表项之间切换时，容器会正确显示和隐藏。

当我点击第二个链接时，我会看到第一个容器是如何隐藏的，第二个容器是如何显示的，反之亦然。

想法是，如果有开放的容器，那些已经＆＃34;崩溃的＆＃34; class应该由js关闭，但是如何禁止关闭活动容器？

例如我单击列表中的第二个链接，我的第一个容器隐藏，第二个容器出现，我再次点击第二个链接，第二个容器消失，所以我在屏幕上看不到任何内容。但列表项是活动的。

所以问题是如何修改js，这样只有一个容器可以＆＃34;崩溃＆＃34;一次一个类，没有什么可以删除它，直到用户将其切换到其他容器，所以类＆＃34;在＆＃34;将移动到来自锚属性的其他容器＆＃34; href＆＃34;并且不能在这个地方被删除？

Answer 1

所以我从@Zigri2612逐点解决了我的问题，但使用了一些不同的方法：

$(function(){
    $('ul li a').on('click', function(){
        $(this).parent().addClass('active').siblings().removeClass('active');

        var to_toggle = $(this).attr('href');

        $("#switch_tables").find('div').each(function(){
            if ( ('#'+$(this).attr("id")) != to_toggle )
                $(this).filter('.collapse.in').collapse('hide');
        });

        $(to_toggle+':not(".in")').collapse('show');
    });
});

Answer 2

如果您使用的是bootstrap，那么您可以使用bootstrap collapse功能，例如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Collapse</title>
  <link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>

<div class="container">

  <div class="page-header">
    <h1>Collapse <small>Bootstrap Visual Test</small></h1>
  </div>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
     Collapse one content
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
         Collapse two content
        </div>
      </div>
    </div>
  </div>

</div>

<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../collapse.js"></script>

</body>
</html>

Answer 3

以下是 collapse hide 和 show 的工作示例。这里的加号和减号 icons 正在发生变化。您可以根据需要更改它。

 $(document).ready(function(){
        // Add minus icon for collapse element which is open by default
        $(".collapse.show").each(function(){
            $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function(){
            $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
        }).on('hide.bs.collapse', function(){
            $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
        });
    });

    .bs-example{
        margin: 20px;
    }
    .accordion .fa{
        margin-right: 0.5rem;
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>

</style>


<div class="bs-example">
    <div class="accordion" id="accordionExample">
        <div class="card">
            <div class="card-header" id="headingOne">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button>                                  
                </h2>
            </div>
            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                <div class="card-body">
                    <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingTwo">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button>
                </h2>
            </div>
            <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                <div class="card-body">
                    <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" id="headingThree">
                <h2 class="mb-0">
                    <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button>                     
                </h2>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                <div class="card-body">
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

隐藏或显示崩溃从js

3 个答案: