Question

嘿我有一个问题如何仅在小型设备（小于767px）中触发data-toggle="dropdown"，boostrap从991px宽度触发它，我尝试更新值或删除它但没有任何反应所以我不能这样做有data-toggle="dropdown"的任何内容？欢迎任何建议

$("a").data("toggle", "update");
$("a").removeData("toggle");

<!-- this is in my html -->
<a href="/Samohyl/volkswagen/modely" class="dropdown-toggle">
    Volkswagen
</a>

<!-- and this happens on 991px and less (bootstrap add data-toggle but I would need add it after 767px ) -->
<a href="/Samohyl/volkswagen/modely" class=dropdown-toggle" data-toggle="dropdown">
    Volkswagen
</a>

Answer 1

试试这个

1st：将您的代码打包在$(document).ready()

中

$(document).ready(function(){
   //$("a[data-toggle]").attr("data-toggle", "update");
   $("a[data-toggle]").removeAttr("data-toggle");
})

第二名：您可以使用$(window).width()来确定所需的宽度

$(document).ready(function(){
   if($(window).width() < 767){
     $("a[data-toggle]").removeAttr("data-toggle");
   }
})

$(document).ready(function(){
  $("a[data-toggle]").attr("data-toggle", "update");
  //$("a[data-toggle]").removeAttr("data-toggle");
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<!-- this is in my html -->
<a href="/Samohyl/volkswagen/modely" class="dropdown-toggle">
    Volkswagen
</a>

<!-- and this happens on 991px and less (bootstrap add data-toggle but I would need add it after 767px ) -->
<a href="/Samohyl/volkswagen/modely" class="dropdown-toggle" data-toggle="dropdown">
    Volkswagen
</a>

覆盖bootstrap data-toggle =“dropdown”

1 个答案: