问Javascript切换colapse div不工作
EN

Stack Overflow用户

提问于 2016-07-20 14:08:28

回答 1查看 51关注 0票数 0

成功了，现在不行了。我就是找不到我做错了什么。当您在选择框中选择"Ja“时，它应该显示一个带有驾驶执照类别的div。

下面是源代码。要解决这个问题应该很简单--我就是看不见

var nein = $('#nein'),
  ja = $('#ja');

ja.click(function() {
  if ($('#kfz').hasClass('in')) {
    return false;
  }
});

nein.click(function() {
  if (!$('#kfz').hasClass('in')) {
    return false;
  }
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <label for="has_driverslicense">KFZ F&uuml;hrerschein:</label>
  <select class="form-control" required="required" id="has_driverslicense" name="has_driverslicense">
    <option value="0" id="nein" data-toggle="collapse" data-target="#kfz">Nein</option>
    <option value="1" id="ja" data-toggle="collapse" data-target="#kfz">Ja</option>
  </select>

  <div id="kfz" class="collapse out">
    <div>
      <input id="checkbox-20" class="checkbox-style" name="work_as_service" type="checkbox">
      <label for="checkbox-20" class="checkbox-style-3-label">B (Auto bis 3,49t)</label>
    </div>
    <div>
      <input id="checkbox-21" class="checkbox-style" name="work_as_service_cashier" type="checkbox">
      <label for="checkbox-21" class="checkbox-style-3-label">BE (Auto mit Anh&auml;nger)</label>
    </div>
    <div>
      <input id="checkbox-22" class="checkbox-style" name="work_as_service_leader" type="checkbox">
      <label for="checkbox-22" class="checkbox-style-3-label">C1 (LKW bis 7,49t)</label>
    </div>
    <div>
      <input id="checkbox-23" class="checkbox-style" name="work_as_bar" type="checkbox">
      <label for="checkbox-23" class="checkbox-style-3-label">C (LKW bis 40t)</label>
    </div>
    <div>
      <input id="checkbox-24" class="checkbox-style" name="work_as_logistics" type="checkbox">
      <label for="checkbox-24" class="checkbox-style-3-label">CE (LKW mit Anh&auml;nger)</label>
    </div>
    <div>
      <input id="checkbox-25" class="checkbox-style" name="work_as_cook" type="checkbox">
      <label for="checkbox-25" class="checkbox-style-3-label">Fahrerkarte</label>
    </div>
    <div>
      <input id="checkbox-26" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
      <label for="checkbox-26" class="checkbox-style-3-label">Gabelstaplerf&uuml;hrerschein</label>
    </div>
    <div>
      <input id="checkbox-27" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
      <label for="checkbox-27" class="checkbox-style-3-label">Gel&auml;ndestaplerf&uuml;hrerschein</label>
    </div>
    <div>
      <input id="checkbox-28" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
      <label for="checkbox-28" class="checkbox-style-3-label">IPAF – Arbeitsbühnen</label>
    </div>
  </div>
</body>
</html>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-20 14:32:22

获取select中的值，并使用addClass/remoceClass

$("#has_driverslicense").on("change", function(){
  if($(this).val() === "1") {
     $('#kfz').addClass("in");  
  } else {
    $('#kfz').removeClass("in");
  }
})

我更新了小提琴：https://jsfiddle.net/aq8pqbft/1/

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38483611

复制

相似问题

问Javascript切换colapse div不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript切换colapse div不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript切换colapse div不工作
EN