Question

我试图使文本消失并用另一个文本替换它，同时我有一个标记，每次点击都必须更改，但只有在第一次点击时它才会改变。我的新文本仅在每次点击时出现和消失，但第一个文本保持不变，如果我将其类更改为“折叠”而不是“崩溃”，则它永远不会出现。这是我的代码：

$(document).ready(function(){
  $("#en").on("show.bs.collapse", function(){
    $(".flag").html('<a href="#en" data-toggle="collapse"><img src="img/france.jpg" alt="french"></img></a>');
  });
  $("#fr").on("hide.bs.collapse", function(){
    $(".flag").html('<a href="#en" data-toggle="collapse"><img src="img/US-GB-Flag.jpg" alt="english"></img></a>');
  });
});

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
    <style>

      .container h1 {
      color: white;
      text-align: center;
      font-size: 50px;

      }
      .container {
        color: black;
        text-indent: 50px;
        font-size: 20px
      }
      .empty {
        height: 5%;
      }
      .jumbotron {
        background-color: transparent;
        text-align: right;
        transform: translateX(-20%)
      }
      .flag {
        text-align: right;
        height: 20%;
      }
      .flag img {
        width: 30%;
      }
      .pict {
        text-align: center;
      }
      .pict img {
        height: 30%;
      }
    </style>
	</head>
<body>
<div class="row">
  <div class="jumbotron col-md-8">
    <h1>Condor</h1>
  </div>
  <div class="col-md-4 flag" id="fr" >
    <a href="#en" data-toggle="collapse"><img src="img/US-GB-Flag.jpg" alt="english"></img></a>
  </div>
</div>
<div class="row">
  <div class="col-md-4 pict"><img src="img/img1.png" alt="img1"></img></div>
  <div class="col-md-4 pict"><img src="img/img2.png" alt="img2"></img></div>
  <div class="col-md-4 pict"><img src="img/img3.png" alt="img3"></img></div>
</div>
<div class="empty"></div>
<div class="container collapse in" id="fr">
  <p>
    AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY
</div>
<div class="container collapse" id="en">
  <p>
    QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY QWERTY
  </p>
</div>
</body>
</html>

Answer 1

Finnaly我实现了添加新事件来强制切换事件，以便js看起来像这样：

＆＃13;

$(document).ready(function(){
  $("#lang").click(function(){
    $("#fr").toggle();
    $("#en").toggle();
  });
  $("#en").on("show.bs.collapse", function(){
    $("#lang").html('<a href="#fr" data-toggle="collapse"><img src="img/france.jpg" alt="french"></img></a>');
  });
  $("#fr").on("hide.bs.collapse", function(){
    $("#lang").html('<a href="#en" data-toggle="collapse"><img src="img/US-GB-Flag.jpg" alt="english"></img></a>');
  });
});

＆＃13;

Bootstrap崩溃无法按预期工作

1 个答案: